Модальные окна Bootstrap 5

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

Компонент Modal — это диалоговое окно/выпадное окно, которое отображается в верхней части текущей страницы:

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

Ниже приведен пример создания базового модального окна:

Пример

<!-- Кнопка для открытия модального окна -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Открыть модальное окно
</button>
<!-- Модальное окно -->
<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 класс (max-width 300px), чтобы добавить большой модальный окно .modal-lg классу (max-width 800px) или добавьте для超大模ального окна .modal-xl чтобы изменить размер модального окна (max-width 1140 пикселей). По умолчанию максимальная ширина 500 пикселей.

Пожалуйста, измените .modal-dialog Добавьте классы и размеры к <div> Элементы:

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

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

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

Большой модальный окно

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

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

Экстра-большое модальное окно

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

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

По умолчанию размер модального окна составляет "medium" (максимальная ширина 500px).

Fullscreen Modals

Если вы хотите, чтобы модальное окно занимало всю ширину и высоту страницы, используйте .modal-fullscreen Класс:

Пример

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

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

Responsive Fullscreen Modals

Вы также можете использовать .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-centric Класс, чтобы выровнять модальное окно по горизонтали и вертикали в окне страницы:

Пример

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

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

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

Когда в модальном окне много контента, на страницу добавляется скролл. См. примеры, чтобы понять:

Пример

<div class="modal-dialog">

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

Но, если использовать .modal-dialog-scrollable Добавить в .modal-dialog Можете прокручивать только внутри модального окна, а не самого окна:

Пример

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

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