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

Модальное окно (modal) — окно поверх страницы, которое затемняет всё остальное и ждёт ответа: подтвердить удаление, заполнить короткую форму. Это первый компонент раздела, которому JavaScript нужен обязательно, поэтому внизу каждого примера стоит bootstrap.bundle.min.js.

Как работают JS-компоненты

У интерактивных компонентов Bootstrap два способа управления:

Способ	Как выглядит
Атрибуты в HTML	`data-bs-toggle="modal"` и `data-bs-target="#id"` на кнопке
JavaScript	`new bootstrap.Modal('#id')`, затем `.show()` и `.hide()`

Атрибутов хватает в большинстве случаев: скрипт Bootstrap сам находит такие кнопки и навешивает обработчики.

Окно по кнопке

Окно — блок modal fade с id, внутри modal-dialog, внутри modal-content с тремя частями: шапкой, телом и подвалом. Кнопка ссылается на окно атрибутом data-bs-target:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div style="min-height: 260px">
  <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
    Удалить проект
  </button>
</div>
 
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="deleteModalLabel">Удалить проект?</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">Все задачи проекта «Сайт» будут удалены без возможности восстановления.</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
        <button type="button" class="btn btn-danger">Удалить</button>
      </div>
    </div>
  </div>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Нажмите красную кнопку: фон затемнится и сверху выедет окно с вопросом. Закрыть его можно крестиком, кнопкой «Отмена», клавишей Escape или щелчком по затемнению. Блок с min-height нужен только превью, чтобы окну хватило высоты.

Варианты окна

Классы добавляют к modal-dialog:

Класс	Что делает
`modal-dialog-centered`	Окно по центру экрана по вертикали
`modal-dialog-scrollable`	Прокрутка внутри тела окна
`modal-sm`, `modal-lg`, `modal-xl`	Ширина окна
`modal-fullscreen`	Окно на весь экран

Атрибут data-bs-backdrop="static" на блоке modal не даёт закрыть окно щелчком мимо него — полезно для формы, где жалко потерять введённое.

Управление из JavaScript

Окно можно открыть из кода — например, после неудачной оплаты — и узнать, когда его закрыли:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div style="min-height: 220px"></div>
 
<div class="modal fade" id="welcome" tabindex="-1" aria-labelledby="welcomeLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        <h1 class="fs-5" id="welcomeLabel">Добро пожаловать в Tasko!</h1>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Начать</button>
      </div>
    </div>
  </div>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
  const welcome = document.querySelector('#welcome');
  welcome.addEventListener('hidden.bs.modal', () => console.log('Окно закрыто'));
  new bootstrap.Modal(welcome).show();
</script>

Окно открывается сразу при загрузке. После нажатия «Начать» под примером появится «Окно закрыто»: событие hidden.bs.modal срабатывает, когда окно полностью скрылось.

Частая ошибка

Вкладывать окно внутрь другого блока со своим позиционированием или overflow: hidden — например, в карточку или шапку. Окно может обрезаться или оказаться под затемнением. Кладите разметку окон прямо в <body>, в конец страницы, перед скриптами.

Спасибо, что читаете!