Почему фон перекрывает окно в Bootstrap Modal Plugin и как исправить.
  • 1682

Почему фон перекрывает модальное окно в Bootstrap Modal Plugin и как это исправить.

Автор: admin | 07 июня (Чт.) 2018г. в 20ч.45м.

При использовании Bootstrap Modal Plugin в качестве модального окна на темном фоне, часто приходилось
сталкиваться с таким не приятным явлением как перекрытие фоном самого модального окна.
Должно быть так:
Bootstrap Modal Plugin в нормальном состоянии.
А вот так бывает, когда фон перекрывает модальное окно bootstrap:
Bootstrap Modal Plugin когда фон поверх окна.
Так как в фреймворке yii2 используется также этот плагин в виде виджета yii\bootstrap\Modal, то
тут также встречается эта проблема.

Почему возникает такая проблема. Дело в том, что большинство современных сайтов используют
fixed, absolute и relative позиционирование элементов в верстке страниц. Поэтому, когда модальное
окно выводится внутри элемента, у которого позиционирование в стилях одно из перечисленных выше, а
при этом затемненный фон Bootstrap Modal выводится в конце body в отдельном элементе, то происходит
такой эффект перекрытия.

В коде это выглядет так:
<body>
    <app>
        <div style="position: absolute">
            ... другой контент
            <div class="modal">
                ... контент модального окна
            </div>
        <div>
    <app>

    <div class="modal-background fade in"></div>
</body>

Проблема возникает из-за того, что контейнер, где лежит модальное окно и другой контейнер
с фоном для этого окна не относятся друг к другу, из-за чего абсолютная (или фиксированная) позиция
и значения z-индекса напрямую не связаны друг с другом.

Самое простое решение - переместить модальное диалоговое окно вне любого контейнера в конец body,
или - удалить любое абсолютное, фиксированное или относительное позиционирование.

<body>
    <app>
        <div style="position: absolute">
            ... другой контент
        <div>
    <app>


    <div class="modal">
        ... контент модального окна
    </div>
    <div class="modal-overlay"></div>
</body>

Так будет лучше. Теперь модальное окно находится на одном уровне с фоном и размещается прямо в body.
Но это еще не все. Дужно еще поправить стили, чтобы все заработало как положено.

.modal-backdrop {
    z-index: 1040 !important;
}
.modal-dialog {
    margin: 2px auto;
    z-index: 1100 !important;
}
А вот так скриптом я помещаю модальное окно в конце body на один уровень с фоном(с помощью jquery).
function showEditor() {
    $("#EditModal").modal("show");//показываем модальное окно
    $("#EditModal").appendTo("body");//перемещаем по DOM в конец body
}​

Где нужно вызвать модальное окно обращаемся к функции showEditor(), например при событии клика
на каком-нибудь элементе:

$('#my_trigger').on('click', function(e){
        showEditor()
    }
);

Теперь в дебаггере в браузере можно увидеть, как расположены элементы окна и фона Bootstrap Modal Plugin
относительно друг друга.
Модальное окно в конце body.
Ну и конечно нужно обратить внимание на стили фона, на его z-index:

В стилях фона модального окна z-index меньше, чем у самого модального окна.

У модального окна z-index имеет большую цифру по сравнению с фоном модального окна. Это важно.
z-index модального окна больше, чем у его фона!

Приветствую!

Меня зовут Сергей. Я - автор этого блога.

Если Вам был полезен материал на моем сайте, поддержите пожалуйста мой проект, чтобы о нем узнали другие люди - кликните plizz :) на иконку в соц. сети, чтобы поделиться материалом с другими.