Последние учебники веб-разработки
 

Bootstrap Modal Plugin


Режимное плагин

Плагин модальное диалоговое окно / всплывающее окно, которое отображается в верхней части текущей страницы:

,

Совет: Плагины могут быть включены по отдельности ( с использованием индивидуальных 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">&times;</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 :

Малый режимное

<div class="modal-dialog modal-sm">
Попробуй сам "

Большой режимное

<div class="modal-dialog modal-lg">
Попробуй сам "
Заметка По умолчанию, модальности среднего размера.

Полное Bootstrap Модальные Reference

Для полного ведения всех видов транспорта вариантов, методов и событий, перейдите на наш Bootstrap JS модального Reference .