Используя 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 мог будет немного беспорядочным.
Любая помощь / совет приветствуются.
@SergChernata Спасибо за ответ. Извините, я думал, что включил этот класс в CSS выше. Все, что он делает, - устанавливает ширину первого модального окна на 900 пикселей, хотя в настоящее время я также использую его для определения того, какие модальные окна имеют плавную / затухающую анимацию. Это всего лишь обходной путь, и я буду использовать для этого отдельный класс.
Что делает
windowClass: 'app-modal-window'
? Применяется ли этот класс кhtml
илиbody
страницы?