Загрузочный модальный плагин
Модальный плагин
Модальный плагин представляет собой диалоговое окно/всплывающее окно, которое отображается поверх текущей страницы:
Совет: Плагины могут быть включены в индивидуальном порядке (с использованием отдельных "модальных 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> модального должен иметь идентификатор, который совпадает с значением атрибута данных-целевого объекта, используемого для запуска модального ("мимодал").
.modal класс идентифицирует содержимое <div> как модальное и привлекает к нему фокус.
.fade класс добавляет эффект перехода, который исчезает модального в и из. Удалите этот класс, если этот эффект не требуется.
Атрибут role="dialog" улучшает доступность для людей, использующих средства чтения с экрана.
.modal-dialog класс задает правильную ширину и поле модального.
Часть "модального содержимого":
<div> с class="modal-content "стили модальных (граница, фон-цвет и т.д.). Внутри этого <div> добавьте заголовок модального, тело и нижний колонтитул.
.modal-header класс используется для определения стиля для заголовка модального. <button>внутри заголовка есть data-dismiss="modal" атрибут, который закрывает модальный, если вы нажмете на него. .closeкласс Styles кнопка закрытия и .modal-title класс стилей заголовок с правильной высотой строки.
.modal-body класс используется для определения стиля для тела модального. Добавьте сюда любую HTML-разметку; параграфы, изображения, videos, etc.
.modal-footer класс используется для определения стиля нижнего колонтитула модального. Обратите внимание, что по умолчанию эта область выровнена по правому краю.
Модальный размер
Измените размер модального, добавив .modal-sm класс для малых модальностей или .modal-lg класса для больших модальностей.
Добавьте класс Size к элементу <div> с классом .modal-dialog :
Small Modal
<div class="modal-dialog modal-sm">
Большой Modal
<div class="modal-dialog modal-lg">
По умолчанию модальные размеры являются средними.
Полный загрузочный модальный Справочник
Для полной ссылки на все модальные варианты, методы и события, перейдите на наш Bootstrap JS модальная ссылка.
