Bootstrap Modal

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

Модальное окно 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.