Диалоговое всплывающее окно также называется модальным и оно отображается поверх текущей страницы и появляется после какого-либо действия.
Код ниже мы будем использовать для создания базового варианта всплывающего окна на Bootstrap 3 версии, которое принято называть модальным окном. Понимаю, что вряд ли данную версию Bootstrap кто-то использует, но этот материал пригодится владельцам старых сайтов с Bootstrap версий 3+.
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Объяснение примера
1. Триггер
Для запуска модального (всплывающего) окна необходимо использовать кнопку (button) или ссылку (a href).
Затем включите два атрибута data-*:
data-toggle="modal" открывает модальное окно
data-target="#myModal" указывает на id модального окна
2. Всплывающее окно
Родительский <div> модального окна должен иметь ID, совпадающий со значением атрибута data-target, используемого для запуска модального окна («myModal»).
Класс .modal идентифицирует содержимое <div> как всплывающего окна и делает акцент на нем.
Класс .fade добавляет эффект перехода, который добавляет эффект затухания всплывающего окна при включении и выключении. Удалите этот класс, если вам не нужен этот эффект.
Атрибут role="dialog" улучшает доступность для людей, использующих программы чтения с экрана.
Класс .modal-dialog задает нужную ширину и отступы окна.
3. Содержимое модального окна
Наш <div> с классом class="modal-content" стилизуют окно (граница, цвет фона и т.д.). Внутри этого <div> можно добавить заголовок, тело и нижний колонтитул.
Класс .modal-header используется для определения стиля заголовка модального объекта.
<button> внутри заголовка имеет атрибут data-dismiss="modal", который закрывает модальное окно, если щелкнуть по нему.
Класс .close стилизует кнопку закрытия, а класс .modal-title задает стиль заголовка с правильной высотой строки.
Класс .modal-body используется для определения стиля тела всплывающего окна. Вы можете добавить любую HTML-разметку здесь — абзацы, изображения, видео и т.д.
Класс .modal-footer используется для определения стиля нижнего колонтитула модального окна. Обратите внимание, что эта область по умолчанию выровнена по правому краю.
Размер всплывающего окна
Измените размер окна, добавив класс .modal-sm для маленьких оконо или класс .modal-lg для больших.
Добавьте класс размера к элементу <div> с помощью класса .modal-dialog.
Маленькое окно:
<div class="modal-dialog modal-sm">Большое окно:
<div class="modal-dialog modal-lg">По умолчанию модальные (всплывающие) окна имеют средний размер.
Чаще всего мне приходилось использовать всплывающие окна для поисковых форм на сайтах. Часто, клиенты хотят сделать маленькую иконку поиска (лупа) вместо большой кнопки, чтобы при нажатии появлялась форма поиска.
В данном случае мы иконку img обрамляем ссылкой a href и добавляем код выше в любое место на сайте.
