logo

Исправляем проблему с Bootstrap modal: появление под фоном

Быстрый ответ

Если ваше модальное окно в Bootstrap скрыто под фоном, измените Z-индекс у самого окна и его фона следующим образом:

CSS
Скопировать код
.modal-backdrop {
    z-index: 1040; /* Я на подиуме! */
}

.modal {
    z-index: 1050; // Освободите мне проход, сейчас я в центре внимания! 
}

Эти CSS-стили помогут удержать модальное окно на переднем плане всех элементов страницы.

Анализ позиционирования элемента

Следует избегать размещения модального окна внутри элемента с атрибутами position: fixed или position: relative;. Они могут привести к неправильному позиционированию окна. Рекомендуется размещать блок с классом .modal в конце тега body (</body>).

Особенности наложения по z-index

Обратите внимание, что z-index работает только с элементами, у которых определено позиционирование (position: absolute, position: relative или position: fixed). Значение position: static; не учитывается. Убедитесь, что модальное окно или его контейнер не используют значение position: static.

Проверка версий

Версии Bootstrap CSS и Bootstrap JS должны совпадать. В случае несоответствия версий может возникнуть непредсказуемое поведение модального окна.

Визуализация

Изначально, без наших исправлений, модальное окно Bootstrap оставалось скрытым:

Markdown
Скопировать код
До:    Прожектор    |   Модальное окно (скрыто)

Но наши изменения в z-index CSS вынесли его на передний план:

CSS
Скопировать код
.modal { z-index: 1040; } /* "Я вижу тебя!" */

Теперь модальное окно ясно и отчетливо видно пользователю:

Markdown
Скопировать код
После:    Модальное окно (видимое)   |   Прожектор

Игра в прятки закончена: модальное окно теперь в центре внимания!

Дополнительные решения

Перемещение модального окна к элементу body

В некоторых случаях модальному окну удобнее находиться ближе к краю страницы. Для этого можно использовать jQuery:

JS
Скопировать код
$(".modal").appendTo("body"); // "Кто сказал, что без <body> нельзя?"

Такое перемещение обычно помогает решить проблемы со старыми слоями z-index.

Удаление конфликтующих свойств CSS

Если у соседних элементов некорректные свойства позиционирования, рекомендуется их удалить или переопределить так, чтобы не нарушить общую структуру стилей ваших страниц.

Атрибут data-backdrop и его роль

Иногда для решения проблемы достаточно просто убрать фон, установив атрибут data-backdrop в значение "false":

HTML
Скопировать код
<div class="modal" data-backdrop="false"> 
    <!-- Содержимое модального окна -->
</div>

Дополнительные способы устранения проблем с наложением

Перемещение div модального окна

Иногда достаточно переместить div за пределы элементов с сложным стеком z-index, чтобы модальное окно отображалось корректно. За счёт такого перемещения, modal получает больше свободы:

HTML
Скопировать код
<!-- Переместите этот div прямо перед закрывающим тегом body -->
<div class="modal" ...></div>
</body>

Обновление Bootstrap

Иногда лучшее решение – это обновить Bootstrap до последней стабильной версии. Обновление может исправить множество возникших проблем.

Полезные материалы

  1. Модальное окно · Bootstrap — официальная документация Bootstrap 4 по разработке модальных окон.
  2. Модальное окно Bootstrap оказывается под фоном – Stack Overflow — обсуждение проблем с z-index и отображением модального окна на Stack Overflow.
  3. z-index – CSS: Каскадные таблицы стилей | MDN — подробный гайд по z-index в CSS на MDN.
  4. Модальные окна Bootstrap — справочник по созданию и настройке модальных окон Bootstrap на W3Schools.
  5. Codeply v2 — интерактивный пример, демонстрирующий решения проблем с z-index модального окна Bootstrap на Codeply.
  6. Учебное пособие | DigitalOcean — руководство по работе с модальными окнами в Bootstrap от DigitalOcean, ранее опубликованное на Scotch.io.