Bootstrap: модальные окна

10 минут на чтение

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

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

Немного теории

Кроме модальных окон, есть еще всплывающие, или “popup”. В принципе смысл тот же, только popup не обязательно блокирует пользовательский интерфейс, может просто появляться для вывода какой-либо полезной, и не только, информации.

Еще один вариант – лайтбокс (“lightbox”), как правило, служит для вывода или увеличения  изображений. Например, при реализации галереи, при наведении или клике на уменьшенное изображение, появляется окно с данным изображением увеличенного размера.

Быстрый старт с Bootstrap

Во первых, модальные окна в Bootstrap это плагин, входящий в состав его библиотеки. Поэтому, для начала работы необходимо подключить две библиотеки js: jQuery и Bootstrap соответственно. Также необходимо подключить стили Bootstrap.

Необходимая разметка для вывода модального окна:

Вызов модального окна

Итак, триггером для вывода модального окна может быть все что угодно, в нашем случае – это кнопка.

  • В атрибутах необходимо указать, что кнопка является переключателем для модального окна data-toggle=”modal”.
  • А также указать ID модального окна, блока с классом modal, в нашем случае data-target=”#example”.

Вызов с помощью JavaScript

Также можно использовать метод modal JS.

Вызвать его можно например при загрузке документа:

При вызове метода можно передать следующие опции (значение всех опций true/false):

  • backdrop – вывод подложки/серого фона модального окна,
  • keyboard – возможность закрытия нажатием клавиши Esc,
  • focus – фокус на модальном окне,
  • show – показывает модальное окно при инициализации.

Также доступны следующие методы:

  • .modal(‘toggle’) – изменяет состояние модального окна (открывает/закрывает),
  • .modal(‘show’) – открывает модальное окно,
  • .modal(‘hide’)) – закрывает модальное окно,
  • .modal(‘dispose’) – удаляет модальное окно,
  • .modal(‘handleUpdate’) – обновляет позицию, если меняется высота окна во время открытия.

Шаблон модального окна

Стандартная структура такова:

  • class=”modal” //родительский блок, содержащий в себе подложку и модальное окна
    • class=”modal-dialog” // обертка модального окна, определяющая его позиционирование и размер
      • class=”modal-content” // непосредственно блок, содержащий модальное окно
        • class=”modal-header” //заголовок
        • class=”modal-body” //тело
        • class=”modal-footer” //футер

Родительский блок modal, обертка modal-dialog, также блок модального окна modal-content являются обязательными, заголовок, тело и футер  можно компоновать по необходимости. Ниже вариант, без заголовка и футера, вполне рабочий вариант, не загромождающий интерфейс и выполняющий свою функцию информационного сообщения.

Родительский блок:

  • не забудьте указать ID, именно по нему мы вызываем нужное модальное окно.
  • Для анимации вывода модального окна необходимо в родительский блок добавить класс fade.

Обертка модального окна:

  • по необходимости,  можно задать размер с помощью классов modal-sm, modal-lg, modal-xl, ниже пример модального окна без заголовка и футера с классом modal-xs.
  • выровнять окно по вертикали по центру  поможет класс modal-dialog-centered.

Блок модального окна modal-content

  • является обязательным, определяет стиль, положение и размер модального окна, добавляя различные классы в данный блок можете изменить его внешний вид

Заголовок, тело, футер

  • здесь можете располагать любой контент, в том числе использовать для разметки сетку bootstrap

Пример #1

Информационное модальное окно,  для подтверждения успешной отправки формы.

 

See the Pen
WOV Bootstrap modal by Paul (@1110000)
on CodePen.

Facebook Vk Ok Twitter Telegram

Похожие записи:

Продолжим верстку ранее начатого макета на Bootstrap 4, подробнее здесь. Рассмотрим как разбить макет на секции, оформить их и сделать более удобной прокрутку на сайте. Техническое задание Функционал: плавная прокрутка Требования к верстке: г...
С учетом возрастания количества, а в некоторых случаях преобладания, на сайтах посетителей, заходящих с мобильных устройств, адаптивное меню становится обязательной составляющей сайта. Bootstrap 4 включает отличный инструмент для создания  адаптивного меню – к...
Динамически переключаемые вкладки являются очень удобным элементом навигации, хорошей альтернативой карусели в некоторых случаях.  Они позволяют разместить большое количество контента в пределах одной секции, сгруппировав его по тематике или другим параметрам....