Bootstrap5 Модальное окно

Модальное окно (Modal) — это дочернее окно, которое накладывается поверх родительской формы. Обычно его цель — отображать содержимое из отдельного источника, позволяя взаимодействовать, не покидая родительскую форму. Дочернее окно может обеспечивать информационное взаимодействие и т. д.

Как создать модальное окно

В следующем примере создаётся простой эффект модального окна:

Пример

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Открыть модальное окно</button> <!--Modal--> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!--Шапка модального окна--> <div class="modal-header"> <h4 class="modal-title">Заголовок модального окна</h4> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <!--Тело модального окна--> <div class="modal-body">Тело модального окна..</div> <!--Подвал модального окна--> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Закрыть</button> </div> </div> </div> </div>

Попробуйте сами »

Добавить анимацию

Используйте класс .fade, чтобы задать эффект появления или закрытия модального окна:

Пример

<!--С эффектом анимации--> <div class="modal fade"></div> <!--Без эффекта анимации--> <div class="modal"></div>

Попробуйте сами »

Размер модального окна

Мы можем использовать.modal-smкласс, чтобы создать маленькое модальное окно,.modal-lgкласс может создать большое модальное окно.

Класс размера размещается<div>после класса.modal-dialogэлемента:

Пример - Маленькое модальное окно

<div class="modal-dialog modal-sm">

Попробуйте сами »

Пример - Большое модальное окно

<div class="modal-dialog modal-lg">

Попробуйте сами »

Пример - Сверхбольшое модальное окно

<div class="modal-dialog modal-xl">

Попробуйте сами »

Полноэкранное отображение

Используйте.modal-fullscreenкласс, чтобы модальное окно отображалось на весь экран:

Пример — полноэкранное отображение

<div class="modal-dialog modal-fullscreen">

Попробуйте сами »

Используйте.modal-fullscreen-*-*класс, чтобы управлять размером экрана, при котором модальное окно отображается на весь экран:

Класс Описание Пример
.modal-fullscreen-sm-down Полноэкранный режим ниже 576px Попробуйте сами
.modal-fullscreen-md-down Полноэкранный режим ниже 768px Попробуйте сами
.modal-fullscreen-lg-down Полноэкранный режим ниже 992px Попробуйте сами
.modal-fullscreen-xl-down Полноэкранный режим ниже 1200px Попробуйте сами
.modal-fullscreen-xxl-down Полноэкранный режим ниже 1400px Попробуйте сами

Центрированное отображение модального окна

Используйте.modal-dialog-centeredкласс, чтобы задать центрирование модального окна как по горизонтали, так и по вертикали:

Пример

<div class="modal-dialog modal-dialog-centered">

Попробуйте сами »

Полоса прокрутки модального окна

По умолчанию, если модальное окно содержит много содержимого, на странице автоматически появится полоса прокрутки, и модальное окно будет прокручиваться вместе со страницей:

Пример

<div class="modal-dialog">

Попробуйте сами »

Если мы хотим задать полосу прокрутки только внутри модального окна, мы можем использовать класс.modal-dialog-scrollable:

Пример

<div class="modal-dialog modal-dialog-scrollable">

Попробуйте сами »
Другие расширения