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