Центровка модального окна Bootstrap: решение через CSS и JS

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

.modal-dialog {
    display: flex;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

Вертикальное центрирование модального окна в Bootstrap можно выполнить с помощью flexbox: к классу .modal-dialog необходимо применить свойства display: flex; и align-items: center;. Для заполнения всего экрана установите минимальную высоту min-height: 100vh;, а внешние отступы margin: 0; помогут добиться идеального центрирования на страницах с вертикальной прокруткой.

За кулисами: методы центрирования

Разберёмся с различными способами размещения модального окна Bootstrap точно в центре вьюпорта.

Я нахожусь здесь, прямо посередине – встроенный класс Bootstrap

В Bootstrap версии 4 и новее имеется удобный класс .modal-dialog-centered, предназначенный специально для таких случаев.

<div class="modal-dialog modal-dialog-centered">
    <!-- Содержимое модального окна -->
</div>

Подробнее об этом расскажет наш спикер на видео

CSS-методы: вертикальное выравнивание с использованием дополнительного div

Если flexbox вам не подходит, можно воспользоваться классическими CSS-приёмами с дополнительной обёрткой в виде блока.

.helper-div {
  display: table;
  height: 100%;
  width: 100%;
}

.modal-dialog {
  display: table-cell;
  vertical-align: middle;
  pointer-events: none; 
}

.modal-content {
  pointer-events: auto;
  margin: 0 auto;
}

Оберните .modal-dialog в дополнительный div с классом .helper-div и наслаждайтесь результатом.

Адаптивность на первом месте

Стиль модального окна должен адаптироваться под различные размеры экранов и браузерных окон.

@media (min-width: 768px) {                  
  .modal-dialog {
    padding-top: 10%;
  }
}

Важно: Убедитесь, что высота модального окна не превышает размер вьюпорта и не вызывает появления прокрутки.

Простота Bootstrap 5

В Bootstrap 5 процесс центрирования оптимизирован и упрощен с помощью улучшенных flex-возможностей.

<div class="modal-dialog m-0 d-flex align-items-center min-vh-100">
    <!-- Содержимое модального окна -->
</div>

Будьте настороже: возможные подводные камни!

Решение типовых проблем

Не забывайте учитывать высоту модальных окон и настройку pointer-events, чтобы обеспечить максимальное удобство использования.

Проблема 1: Высота модального окна

Если модальное окно превышает высоту вьюпорта, настройте overflow-y на auto и используйте max-height для контроля над скроллом.

Проблема 2: Правильное взаимодействие с модальным окном

Установка pointer-events: auto; на .modal-content позволит пользователю взаимодействовать с содержимым, а .helper-div с pointer-events: none; предоставит возможность закрыть окно, кликнув вне его области.

Проблема 3: Динамическое изменение содержимого

Для того чтобы модальное окно правильно реагировало на изменение содержимого, используйте JavaScript или jQuery, предварительно установив display: block;.

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

Визуализируйте модальное окно как воздушный шар, который равномерно парит в центре небосклона.

.modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100vh – 60px);
}

Применение flexbox для центрирования сопоставимо с подъемной силой воздушного шара.

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

1. Modal · Bootstrap v5.0
2. Полное руководство по Flexbox | CSS-Tricks
3. Гибкое размещение элементов с использованием CSS – CSS: Каскадные таблицы стилей | MDN
4. Сетка в стиле масонства с помощью CSS Grid | by Andy Barefoot | Medium
5. Абсолютное горизонтальное и вертикальное центрирование в CSS — Smashing Magazine
6. Руководство по созданию модального окна с помощью CSS и JavaScript

Помните, что практика – ключ к мастерству. Используйте полученные знания в своём коде и делитесь успехами! Удачи в программировании!👩‍💻