Question

使用UI Bootstrap，我有一个模态窗口，如下所示。按照正常行为，打开模式后，网站的其余部分将以背景阴影显示，如下所示：

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

但是，当第二个模式打开时，我希望的行为是使网站的其余部分的背景阴影更深，第一个模式具有正常的阴影。例如，可以在Twitter中打开两个模式来看到这种效果，如下所示：

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

$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 可能可能有点混乱。

感谢任何帮助/建议。

显示两个模态时不同的背景底纹

0 个答案: