Различное затенение фона при отображении двух модальных окон

Используя 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 мог будет немного беспорядочным.

Любая помощь / совет приветствуются.

Что делает windowClass: 'app-modal-window'? Применяется ли этот класс к html или body страницы?

Serg Chernata 25.08.2018 22:33

@SergChernata Спасибо за ответ. Извините, я думал, что включил этот класс в CSS выше. Все, что он делает, - устанавливает ширину первого модального окна на 900 пикселей, хотя в настоящее время я также использую его для определения того, какие модальные окна имеют плавную / затухающую анимацию. Это всего лишь обходной путь, и я буду использовать для этого отдельный класс.

John Steed 25.08.2018 23:00
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
2
65
0

Другие вопросы по теме