Модальный плагин Bootstrap
Модальный плагин
Модальный плагин — это диалоговое/всплывающее окно, которое отображается поверх текущей страницы:
Совет. Плагины можно включать по отдельности (используя отдельный файл Bootstrap «modal.js») или все сразу (используя «bootstrap.js» или «bootstrap.min.js»).
Как создать модальное окно
В следующем примере показано, как создать базовое модальное окно:
Пример
<!-- 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>
Объяснение примера
Часть «Триггер»:
Чтобы вызвать модальное окно, вам нужно использовать кнопку или ссылку.
Затем включите два атрибута data-*:
data-toggle="modal"открывает модальное окноdata-target="#myModal"указывает на идентификатор модального
«Модальная» часть:
Родитель <div>модального окна должен иметь идентификатор, который совпадает со значением атрибута data-target, используемого для запуска модального окна («myModal»).
Класс .modalидентифицирует содержимое <div>как модальное и фокусирует на нем внимание.
Класс .fadeдобавляет эффект перехода, который постепенно появляется и исчезает в модальном окне. Удалите этот класс, если вы не хотите этого эффекта.
Атрибут role="dialog"улучшает доступность для людей, использующих программы чтения с экрана.
Класс .modal-dialogустанавливает правильную ширину и поля модального окна.
Часть «Модальное содержание»:
<div>with " 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">
По умолчанию модальные окна имеют средний размер.
Полная модальная ссылка Bootstrap
Для получения полного справочника по всем модальным параметрам, методам и событиям перейдите в наш модальный справочник Bootstrap JS .