css - 显示两个模态时的不同背景阴影

Question

使用 UI Bootstrap，我有一个模态窗口，如下所示。按照正常行为，当模式打开时，站点的其余部分会被背景遮蔽，如下所示：

这个模态本身可以打开另一个第二个模态。发生这种情况时，第一个模态框会以与站点其余部分相同的颜色进行着色，如下所示：

但是，当第二个模态打开时，我想要的行为是让站点的其余部分为背景设置较暗的阴影，而第一个模态则具有正常的阴影。例如，在 Twitter 中打开两个 modals 可以看到这个效果，如下图：

这是用于显示第一个模式的代码：

$rootScope.modalInstance = $uibModal.open({
    templateUrl: 'WebApp/modalOne.html',
    controller: 'modalOneController',
    backdrop: 'static',
    windowClass: 'app-modal-window'
});

这显示了第二个模态：

$rootScope.modalInstance = $uibModal.open({
    templateUrl: 'WebApp/modalTwo.html',
    controller: 'modalTwoController',
    backdrop: 'true',
    windowClass: 'center-modal',
    animation: false
});

这是相关的CSS：

.modal-backdrop,
.modal {
    opacity: 0;
}


.app-modal-window.modal.in-add {
    -webkit-animation: fadeIn 0.3s ease-out;
    animation: fadeIn 0.3s ease-out;
}


.modal.in {
    opacity: 1;
}


.modal-backdrop.in-add {
    -webkit-animation: fadeIn 0.3s ease-out;
    animation: fadeIn 0.3s ease-out;
}



.modal-backdrop.in {
    animation: fadeInBackdrop 0.3s !important;
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}

.modal.in {
    opacity: 1;
}


.app-modal-window.modal.in-remove {
    -webkit-animation: fadeOut 0.2s ease-out;
    animation: fadeOut 0.2s ease-out;
    opacity: 0;
}

.modal-backdrop.in-remove {
    -webkit-animation: fadeOutBackdrop 0.2s ease-out;
    animation: fadeOutBackdrop 0.2s ease-out;
    opacity: 0;
}


.modal.fade .modal-dialog, .modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeInBackdrop {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.5;
    }
}

@keyframes fadeInBackdrop {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.5;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOutBackdrop {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOutBackdrop {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 0;
    }
}



.center-modal.modal {
    text-align: center;
}

@media screen and (min-width: 768px) {
    .center-modal.modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
}

.center-modal .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

关于 CSS，请注意我必须做一些实验才能将 UI Bootstap 的默认动画更改为我的要求。这些要求是同时淡入/淡出背景和模态，没有模态的垂直移动动画。因此，CSS可能有点混乱。

任何帮助/建议表示赞赏。

标签： cssbootstrap-modalangular-ui-bootstrap