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）

从您的问题看来，您希望将您的课程应用于课程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;
}

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');
                    };
                },
            });

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

2 个答案: