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

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

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

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

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

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

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

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

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

<button type="button" class="btn" data-toggle="modal" data-target="#example"> кнопка </button>  <div class="modal" id="example"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header">  Заголовок </div> <div class="modal-body">  Содержимое ... </div> <div class="modal-footer">  Футер </div> </div> </div> </div>

кнопка

</button>

Заголовок

</div>

Содержимое ...

</div>

Футер

</div>

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

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

<button type="button" class="btn" data-toggle="modal" data-target="#example">кнопка</button>

1	<button type="button" class="btn" data-toggle="modal" data-target="#example">кнопка</button>

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

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

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

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

1	$('#example').modal(options)

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

$(document).ready(function(){ setTimeout("$('#example0').modal({backdrop:true,})",5000); //вывод окна через 5 с после готовности страницы })

$(document).ready(function(){

setTimeout("$('#example0').modal({backdrop:true,})",5000); //вывод окна через 5 с после готовности страницы

})

При вызове метода можно передать следующие опции (значение всех опций 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.

1	<div class="modal fade" id="example">

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

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

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

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

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

1	<div class="modal-content bg-secondary shadow-lg border-white text-white text-center font-weight-bold">

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

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

Пример #1

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

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example"> Жми #1 </button>  <div class="modal fade" id="example" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header">  <h5 class="modal-title" id="exampleLabel">Поздравляем !</h5>  <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body">  <p>Ваша заявка принята !</p> </div> <div class="modal-footer">  <button type="button" class="btn btn-success" data-dismiss="modal">Ok</button> </div> </div>

Жми #1

</button>

<h5 class="modal-title" id="exampleLabel">Поздравляем !</h5>

</button>

</div>

<p>Ваша заявка принята !</p>

</div>

</div>

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

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

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

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

Пример #1

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