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

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

От автора: в этом руководстве мы поговорим об одном из наиболее полезных jQuery Bootstrap плагинов — модальном окне. Модальное окно Bootstrap – это лёгкое, многофункциональное всплывающее окно с помощью JavaScript, которое являющется настраиваемым и адаптивным. Его можно использовать для того, чтобы отображать на веб-сайте всплывающие сообщения, изображения и видео. Разработанные с помощью Bootstrap веб-сайты могут использовать модальные окна для демонстрации, к примеру, положений и условий соглашения (как часть процесса подписания договора), или даже виджетов соцмедиа.

А сейчас, давайте рассмотрим разные составляющие модальных окон Bootstrap, чтобы получше в них разобраться. Модальное окно Bootstrap состоит из трёх основных элементов: заголовок, тело и футер. Каждая из секций выполняет свою роль, и в соответствии с этим должна использоваться. Пройдемся по ним кратко. Чем нас впечатляют модальные окна Bootstrap? Тем, что для их написания нам не нужна ни единая строчка JavaScript! И код, и стили уже предопределил Bootstrap. Вам нужно использовать только подходящую разметку и атрибуты, и всё заработает.

Модальное окно по умолчанию

Модальное окно Bootstrap по умолчанию выглядит так:

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

Чтобы запустить модальное окно, нужно добавить ссылку или кнопку. Вот как выглядит разметка для элемента запуска:

Обратите внимание на то, что элемент ссылки имеет два пользовательских атрибута данных: data-toggle и data-target. toggle указывает Bootstrap, что нужно делать, а target — какой элемент нужно открывать. Таким образом, не зависимо от того, как выглядит ссылка, на которую кликают, появится модальное окно с ID «basicModal».

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

Родительский div модального окна должен иметь тот же ID, который использовался в вышеприведённом элементе запуска. В нашем случае, это будет id=»basicModal».

Примечание: Такие пользовательские атрибуты как aria-labelledby и aria-hidden в родительском модальном элементе используются для доступности. Вообще рекомендуется делать веб-сайт доступным, поэтому включите эти атрибуты, потому что они не будут отрицательно влиять на стандартную функциональность модального окна.

В HTML модального окна мы видим контейнер div, вложенный в родительский div модального окна. Этот div имеет класс modal-content, который указывает bootstrap.js, где нужно искать содержимое модального окна. Внутрь этого div нам нужно поместить три ранее упоминавшихся секции: заголовок, тело и футер.

Как нам подсказывает его название, заголовок модального окна используется для того, чтобы задать для модального окна заглавие и другие элементы, например, кнопка закрытия «x». Он должен содержать атрибут data-dismiss, который указывает Bootstrap убрать элемент.

Дальше идёт тело модального окна, одноуровневый с заголовком div . Представьте, что тело – это холст, с которым можно экспериментировать. Вы можете добавить туда любой вид данных, включая YouTube видео, изображение, или что-нибудь ещё.
Наконец, футер. Эта область по умолчанию выровнена по правому краю. Здесь вы можете разместить кнопки, например, «Сохранить», «Закрыть», «Принять» и другие, ассоциирующиеся с тем действием, которое представляет модальное окно.

Вот мы и закончили с первым модальным окном! Можете посмотреть на него на нашей странице с демо-примерами.

Изменяем размер модального окна

Ранее я упоминал, что модальное окно Bootstrap является адаптивным и гибким. Модальное окно бывает большим и маленьким. Для большого размера можно добавить в div .modal-dialog класс модификатора modal-lg , а для маленького – modal-sm.

Активируем модальное окно с помощью jQuery

Модальное окно – это плагин jQuery, поэтому если вы хотите управлять им при помощи jQuery, то вам понадобиться вызвать функцию .modal() для селектора модального окна. Например:

Здесь options – это объект JavaScript, который может быть передан для настройки поведения. Например:

Доступными являются следующие опции:

backdrop: Может быть либо true, либо static. Эта опция определяет, хотите ли вы, чтобы пользователь имел возможность закрыть модальное окно, кликая на внешний фон, или нет.

keyboard: если задано true, то модальное окно закрывается через кнопкуESC.

show: используется для открытия и закрытия модального окна. Может быть true или false.

focus: при инициализации ставит фокус на модальное окно. Может быть true или false, по умолчанию задано как false.

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

Вы также можете изменять обычное поведение модального окна Bootstrap используя события, которые запускаются во время открытия и закрытия модального окна. Эти события должны быть связаны при помощи метода jQuery.on().
Ниже представлены доступные события:

show.bs.modal: запускается перед открытием модального окна.

shown.bs.modal: запускается после отображения модального окна.

hide.bs.modal: запускается перед закрытием модального окна.

hidden.bs.modal: запускается после закрытия модального окна.

Вы можете использовать один из вышеуказанных элементов таким образом:

Вывод

Модальное окно является одним из наилучших плагинов, которые предложил Bootstrap. Для начинающего дизайнера – это один из лучших способов загрузить контент во всплывающем окне, не задействуя JavaScript. Ниже представлена демо-версия с CodePen с тремя примерами модальных окон.

Автор: Syed Fazle Rahman

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: