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

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

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

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

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

модальное окно 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- к кнопке или ссылке для вызова окна:

АтрибутТипПо умолч.Описание
backdropboolean или слово 'static'trueЗатемнение фона под всплывающим окном.

  • true – тёмный фон
  • false – без затемнения (прозрачный фон)

Если указать static, то по клику на темный фон окно не закроется.

keyboardbooleantrueЗакрытие окна по нажатию кнопки “Escape”

  • true – окно можно закрыть через Esc
  • false – окно не реагирует на кнопку Esc
showbooleantrueПоказ окна после инициализации

Методы 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-й версии оно удалено.

Поширити у Фейсбуці
Надіслати у Messenger
Зберегти в Pocket
Надіслати в Telegram
Надіслати у WhatsApp

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

3 коментаря

спочатку нові
за рейтингом спочатку нові за хронологією

В этой статье у вас код примера расходится с результатом и описанием.

Привет! Почему на мобильном устройстве при нажатии кнопки окно появляется и туже исчезает? то есть только фон затемнён а окна нет при кликанье на пустую область оно опять на доли секунды появляется и исчезает? самое интересно на ПК всё работает? Подскажите где копать!

короче на до hide прописать вместо fade затухание