如何间接改变模态背景的z-index？

Question

我需要更改模态背景类的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; }