向AngularJS Modal UI.Bootstrap模式添加其他类

Question

我做了一个函数来打开模态,我在尝试自定义它时遇到了麻烦.

根据文档,windowClass参数应该向模态窗口添加类,但它不起作用,我想知道你是否有人使它工作

这是我的代码:

function openModal(title, msg) {

                $rootScope.modalTitle = title;
                $rootScope.modalmsg = msg;

                var notificationModal = $modal.open({
                    templateUrl : "app/modals/NewTicket.html",
                    controller  : function ($scope, $rootScope, $modalInstance) {

                        $scope.myTitle = $rootScope.modalTitle;
                        $scope.modalMsg = $rootScope.modalmsg;

                        $scope.cancel = function () {
                            $modalInstance.dismiss('cancel');
                        };
                    },
                    windowClass : "newTicket"     //THIS IS NOT WORKING
                });

            }

Answer 1

ui-bootstrap 在以下层次结构中创建模态

<div uib-modal-window="modal-window">
    <div class="modal-dialog ">
        <div class="modal-content">
            <!-- three more divs for header, body and footer-->
        </div>
    </div>
</div> 

该属性windowClass将css类添加到最顶层的div(带属性的div uib-modal-window)

从您的问题看来,您希望将您的课程应用于课堂上的div modal-content

要做到这一点,你可以做这样的事情

#add this class to windowClass 
.modal-window-extension {

}

#add your styling rules to this class
.modal-window-extension .modal-dialog .modal-content {
    opacity: 0.95;
    background-color: #2d2626;
}

Answer 2

var notificationModal = $modal.open({
                templateUrl : "app/modals/NewTicket.html",
                windowClass : "newTicket",
                controller  : function ($scope, $rootScope, $modalInstance) {

                    $scope.myTitle = $rootScope.modalTitle;
                    $scope.modalMsg = $rootScope.modalmsg;

                    $scope.cancel = function () {
                        $modalInstance.dismiss('cancel');
                    };
                },
            });