Bootstrap модальные окна: руководство по modal.js

Для корректной работы плагина необходимо подключить jQuery перед подключением bootstrap.min.js. Если используется CDN Bootstrap, добавьте modal.js из getbootstrap.com/customize.

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

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

Создание простого модального окна

Кнопка для открытия модального окна:

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Всплывающее окно</button>

data-toggle="modal": указывает, что кнопка запускает модальное окно.
data-target="#myModal": указывает ID блока, который будет открыт.

Сам блок модального окна:

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Заголовок окна</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      <div class="modal-body">
        <p>Текст уведомления</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

class="modal fade": задает модальное окно и плавное появление/исчезновение.
modal-dialog: устанавливает ширину и отступы окна.
modal-content: содержит содержимое окна.
modal-header: содержит заголовок и кнопку закрытия. data-dismiss="modal" закрывает окно.
modal-body: содержит основное содержимое окна.
modal-footer: содержит нижнюю часть окна (кнопки и т.д.).
class="close" и ×: создают кнопку закрытия.

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

Bootstrap предлагает три размера:

По умолчанию: modal-dialog
Маленькое: modal-dialog-sm
Большое: modal-dialog-lg

Закрытие по Escape

Атрибут tabindex="-1" в главном блоке модального окна (<div id="myModal" …>) обеспечивает его закрытие при нажатии клавиши Escape.

Управление с помощью jQuery

Открытие, закрытие и переключение состояния модального окна:

$('#myModal').modal(); // Открывает окно
$('#myModal').modal('hide'); // Закрывает окно
$('#myModal').modal('toggle'); // Переключает состояние

Доступные опции: show, hide, toggle.

События модального окна

Отслеживаемые события:

shown.bs.modal: выполняется после полного открытия.
hidden.bs.modal: выполняется после полного закрытия.
show.bs.modal: выполняется в начале открытия.
hide.bs.modal: выполняется в начале закрытия.

Пример использования hidden.bs.modal:

$('#myModal').on('hidden.bs.modal', function () {
  alert('Выполнено!');
});

Модальные окна в Bootstrap реализуются просто и эффективно с помощью плагина modal.js, предлагая гибкую настройку и удобное управление через jQuery и обработку событий.