angularjs - 向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(具有 uib-modal-window属性的div)

从您的问题看来，您想将您的类(class)应用于带有 modal-content的div

为此，您可以执行以下操作

#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;
}