Bootstrap Modal

Bootstrap Modal — это легкий настраиваемый и адаптивный popup JavaScript. Модальное окно Bootstrap Modal можно использовать на веб-странице для всплывающего окна. В всплывающем окне можно отобразить видео, изображения, предупреждения, правила и условиями (как часть процесса регистрации), или даже иконки социальных сетей.

Оглавление:
  1. Модальное окно Bootstrap Modal
  2. Настройки по умолчанию
  3. Изменить размер модального окна
  4. Модальное окно jQuery
  5. События модальных окон Bootstrap
  6. Удаленное содержимое в модальном окне
  7. Заключение

Модальное окно Bootstrap Modal

Теперь давайте рассмотрим различные части загрузки модального окна.

Всплывающее окно Bootstrap Modal делится на три основных раздела: заголовок, тело и нижний колонтитул. Каждый имеет свое собственное значение, и следовательно, должны использоваться надлежащим образом.

Преимущество всплывающего окна Bootstrap Modal, в том что Вам не придется писать свой JavaScript для применения его на сайте. Весь код и стили в Bootstrap Modal стандартные. Все что нужно для работы Bootstrap Modal, это правильно использовать вызовы, разметку и атрибуты, это не трудно, читайте дальше и Вы узнаете как это сделать.

к меню ↑

Настройки по умолчанию

С настройками по умолчанию, модальное окно Bootstrap Modal выглядит так:

Вид модального окна Bootstrap Modal
Вид модального окна по умолчанию

Смотрите пример The Modal на странице сайта Bootstrap.

Чтобы вызвать модальное окно на веб-странице сайта, вам необходимо вывести на страницу ссылку или кнопку.

Разметка для вызова модального окна:

<a class="btn btn-lg btn-success"
     href="#" data-toggle="modal"
     data-target="#basicModal">Открыть модальное окно</a>

Обратите внимание на ссылку, элемент a имеет два собственных атрибута данных: data-toggle и data-target. Переключатель data-toggle указывает Bootstrap, что ему нужно открыть всплывающее окно, а data-target указывает на элемент для открытия. Поэтому, после нажатия на кнопку появится модальное окно с идентификатором basicModal.

Теперь давайте посмотрим на код, необходимый для определения модального окна.

Разметка окна:

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog">
     <div class="modal-dialog">
       <div class="modal-content">
          <div class="modal-header"><button class="close" type="button" data-dismiss="modal">x</button>
             <h4 class="modal-title" id="myModalLabel">Название модального окна</h4>
          </div>
        <div class="modal-body">
          <h3>Содержимое модального окна</h3>
        </div>
       <div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Закрыть</button>
          <button class="btn btn-primary" type="button">Сохранить изменения</button></div>
    </div>
  </div>
</div>

Для элемента div должен быть идентификатор, который используется в качестве атрибута для data-target. В нашем примере этот идентификатор id="basicModal".

Пользовательские атрибуты WAI-ARIA, такие как aria-labelledby и aria-hidden в корневом элементе используются для доступности.

В коде HTML, существует блок, вложенный в корневой элемент div. Он имеет класс modal-content и говорит bootstrap.js где искать содержимое для модального окна. Внутри элемента div, мы должны разместить три блока, которые Я упоминал ранее: заголовок, тело и нижний колонтитул.

Заголовок модального окна, как следует из самого названия, используется для названия всплывающего окна, а другие элементы, такие как x — закрыть окно. Кнопка закрыть имеет атрибут data-dismiss, который указывает какой элемент закрыть.

После заголовка Вы можете добавлять любые данные, в том числе видео с YouTube, вставить изображения и т.п.

В конце модального окна — нижний колонтитул. По умолчанию эта область с левой стороны. В этой области можно поместить действие кнопки “Сохранить”, “Закрыть”, “Принять”, и др.

Открыть модальное окно

к меню ↑

Изменить размер модального окна

Bootstrap Modal адаптивный для всех размеров мониторов. В этом разделе Вы увидите, как изменить размер всплывающего окна.

Комплект Bootstrap Modal поставляется с двумя новыми вариантами окна: Большое и Маленькое. Для большего окна нужно добавить модификатор класса modal-lg для modal-dialog, а для маленького окна modal-sm.

Модальное окно jQuery

Modal — это плагин jQuery, поэтому, если вы хотите модальное окно с использованием jQuery, Вам необходимо вызвать функцию .modal() на модальные селектора.

Например:

$('#basicModal').modal(options);

“options” здесь будет объект JavaScript, который передаёт поведение.

Например:

var options = {
    "backdrop" : "static"
}

Доступны следующие параметры:

  • backdrop: может быть true либо static пользователь сможет закрыть модальное окно в фоновый режим.
  • keyboard: если установить true модальное окно будет закрыто с помощью клавиши ESC.
  • show: используется для открытия и закрытия модального. Это может быть либо true или false.
  • remote: это один из лучших вариантов. Можно использовать для удаленной загрузки содержимого с помощью jQuery метода load(). Вам необходимо указать внешнею страницу в этот параметр. Значение по умолчанию false.
к меню ↑

События модальных окон Bootstrap

Вы можете дополнительно настроить Bootstrap с помощью различных событий, которые запускаются во время открытия и закрытия модального окна. Эти события должны быть связаны с помощью метода jQuery on().

События:

  • show.bs.modal: событие перед открытием модального окна.
  • shown.bs.modal: событие после открытия модального окна как показано показано на снимке.
  • hide.bs.modal: событие перед закрытием модального окна.
  • hidden.bs.modal: событие после закрытия модального окна.
  • loaded.bs.modal: событие, когда удаленное содержимое успешно загружено в области модального окна, с помощью варианта remote.

Вы можете использовать один из вышеперечисленных событий, например вот так:

$('#basicModal').on('shown.bs.modal', function (e) {
    alert('Модальное окно успешно показано!');
});
к меню ↑

Удаленное содержимое в модальном окне

Существует три различных способа подключить удаленное содержимое внутри всплывающего окна Bootstrap Modal.

Первый способ заключается в использовании remote опция внутри объекта options, как упоминалось выше. Два других способа сделать это без JavaScript, как показано ниже.

Ссылка на внешнее содержание:

<a class="btn btn-lg btn-default"
     data-toggle="modal"
     data-target="#remoteModal"
     href="remote-page.html">Открыть модальное окно</a>

Или использовать пользовательский атрибут данных data-remote вместо href.

Например:

<a class="btn btn-lg btn-default"
     data-toggle="modal"
     data-target="#remoteModal"
     data-remote="remote-page.html">Открыть модальное окно</a>
к меню ↑

Заключение

Bootstrap Modal один из лучших плагинов предлагаемый Bootstrap 3. Для начинающего дизайнеров — это один из лучших способов для отображения содержимого внутри всплывающего окна без написания какого-либо дополнительного кода JavaScript.