Bootstrap: всплывающие окна, modal.js

admin

8 лет назад

modal.js — это компонент Bootstrap, который отвечает за показ и управление всплывающими окнами. Я расскажу, как с ними работать.

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

На одной странице может быть любое количество окон, которые будут работать независимо друг от друга.

Следует заметить, что атрибут autofocus не будет работать во всплывающих окнах.

За работу модуля отвечает файл modal.js, его можно использовать отдельно либо вместе с остальными элементами (по умолчанию он включён в состав файлов bootstrap.js и bootstrap.min.js). Чтобы получить возможность пользоваться модальными окнами, нужно сначала подключить jQuery.js, а после этого файл модуля или общий файл со всеми js-модулями Bootstrap.

Код примера:

<button class="btn btn-info btn-lg" type="button" data-toggle="modal" data-target="#myModal">Показать всплывающее окно</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Заголовок окна</h4>
</div>
<div class="modal-body">Текст уведомления</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Закрыть</button></div>
</div>
</div>
</div>

Пояснение примера

Вызов окна:

Чтобы показать окно, можно использовать кнопку либо ссылку. Укажите для них data-* атрибуты окна:

data-toggle="modal" показывает модальное окно
data-target="#myModal" указывает id окна, которое нужно открыть

Блок “Modal”, контейнер окна:

Родительский элемент <div> модального окна должен иметь id, совпадающий с атрибутом data-target у кнопки или ссылки, которая вызывает это окно, (в данном случае это myModal).
Класс .modal определяет содержимое окна.
Класс .fade добавляет эффект плавного появления и затухания окна. Если класс убрать, окно будет появляться и исчезать мгновенно.
Атрибут role="dialog" используется на устройствах для людей с ограниченными способностями. Это может быть screen reader, который озвучивает содержимое страницы для слабовидящих людей
Класс .modal-dialog устанавливает ширину и отступы для окна.

Блок с содержимым окна:

Элемент с классом .modal-content добавляет стили Bootstrap к окну (границы, цвет фона, тени и так далее). Всё содержимое модального окна (заголовок, футер, контент) должно находиться внутри этого блока.
Элемент .modal-header определяет стили для заголовка всплывающего. Обратите внимание: у кнопки <button> внутри этого блока есть атрибут data-dismiss="modal", который используется, чтобы закрыть модальное окно по клику на кнопке. Класс .close добавляет стили кнопке, а класс .modal-title class устанавливает стили для заголовка с нужной высотой строки.
Элемент .modal-body это то, ради чего всё затевалось, то есть содержимое всплывающего окна. Здесь может быть что угодно: текст, изображения, видео и любые другие html-элементы.
.modal-footer используется для стилизации нижней части окна. Обратите внимание: по умолчанию равнение текста здесь по правому краю.

Размеры окна

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

Чтобы изменить размер окна, к элементу с классом .modal-dialog нужно добавить .modal-sm для уменьшенного или .modal-lg для увеличенного размера окна:

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

или

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

Закрытие по кнопке Esc

Чтобы модальное окно можно было закрыть не только при помощи кнопки, но и клавишей Esc на клавиатуре, элементу .modal нужно добавить атрибут tabindex="-1":

<div class="modal fade" tabindex="-1" role="dialog">

Второй вариант: добавить атрибут keyboard к вызову окна, о нём написано ниже.

Вызов всплывающего окна

Кроме описанного выше вызова через кнопку или ссылку, также есть способ запуска окна при помощи JavaScript:

$('#myModal').modal(options)

Настройки окна

Настройки модальных окон можно также передавать как через data-атрибуты, так и через JavaScript. Для первого случая, добавляйте имя опции к data- к кнопке или ссылке для вызова окна:

Атрибут	Тип	По умолч.	Описание
backdrop	`boolean` или слово `'static'`	true	Затемнение фона под всплывающим окном. `true` – тёмный фон `false` – без затемнения (прозрачный фон) Если указать `static`, то по клику на темный фон окно не закроется.
keyboard	`boolean`	true	Закрытие окна по нажатию кнопки “Escape” `true` – окно можно закрыть через Esc `false` – окно не реагирует на кнопку Esc
show	`boolean`	true	Показ окна после инициализации

Методы Modal.js

Эти методы помогут вам получить полный контроль над всплывающими окнами: показывать или скрывать или менять состояние в зависимости от текущего.

Метод	Описание
`.modal(options)`	Создаёт модальное окно
`.modal("toggle")`	Меняет видимость окна
`.modal("show")`	Показывает окно
`.modal("hide")`	Прячет окно

События Modal.js

Bootstrap позволяет создавать свои обработчики событий модальных окон. Их очень легко настроить, есть 4 таких события.

Событие	Описание
`show.bs.modal`	Событие происходит сразу, как только запускается метод show (показа окна). Если вы запускаете окно по клику, то элемент, на котором был клик, доступен через свойство `relatedTarget` события.
`shown.bs.modal`	Событие происходит, когда окно стало полностью видимым для пользователя (все анимации окончены).
`hide.bs.modal`	Событие происходит как только запускается метод `hide`.
`hidden.bs.modal`	Событие происходит после того, как окно полностью скрывается от пользователя (после всех анимаций).

Пример события:

$('#myModal').on('hidden.bs.modal', function (event) { 
// функции 
});

В устаревших версиях действовало событие remote, но начиная с 4-й версии оно удалено.
Источник