angular ui bootstrap -如何间接改变模式背景的z-index

Question

我需要改变mode - background类的z-index，但我不想像这样直接改变它:

 .modal-backdrop { z-index: 1090; }

，因为它在应用程序的许多地方使用，我想改变它的单模态窗口。如何做到这一点?我的模态服务是这样的:

angular.module('myModule').factory('modalFactory', function ($modal, $modalStack) {
        return {
            open: function () {
                $modal.open({
                    templateUrl: 'templates/modaltmp',
                    backdrop: 'static',
                    dialogFade: false,
                    keyboard: false,
                    controller: 'modalController as modalCtrl',
                });
            },
            close: function (reason) {
                $modalStack.dismissAll('close');
            }
        };
});

Answer 1

Angular有一个backdropClass的设置，用它来添加另一个类，然后用那个类来覆盖你自己的z-index:

    angular.module('myModule').factory('modalFactory', function ($modal, $modalStack) {
        return {
            open: function () {
                $modal.open({
                    templateUrl: 'templates/modaltmp',
                    backdrop: 'static',
                    backdropClass: 'foo',
                    dialogFade: false,
                    keyboard: false,
                    controller: 'modalController as modalCtrl',
                });
            },
            close: function (reason) {
                $modalStack.dismissAll('close');
            }
        };
    });

然后在你的CSS中:

.modal-backdrop.foo { z-index: 1090; }