Еврей — это тот, кого другие считают евреем (Жан Поль Сартр).

Bootstrap — плагин для модальных окон

3 мин для чтения

Главное меню » Учебное пособие по framework Bootstrap » Bootstrap — плагин для модальных окон

(1 оценок, среднее: 5,00 из 5)

Загрузка...

06.10.2017

Модальное окно это дочернее окно, которое наслаивается над его родительское окно. Как правило, цель состоит в том, чтобы отобразить содержимое из отдельного источника, который может иметь некоторое взаимодействие, не выходя из родительского окна. Дочерние окна могут предоставить информацию, взаимодействие, или что-то другое.

Если вы хотите включить эту функциональность плагина в отдельности, то вам нужен modal.js. В противном случае, как уже упоминалось в главе Обзор плагинов Bootstrap, вы можете включить bootstrap.js или минимизированный bootstrap.min.js.

Применение

Вы можете включить скрытое содержание с помощью плагина модального окна:

С помощью атрибутов данных — набор атрибутов data-toggle=»modal» на элементе контроллера, как кнопка или ссылка, вместе с data-target=»#identifier» или href=»#identifier» для нацеливания на определенную модальность (с ID = «идентификатор») для переключения.
С помощью JavaScript — Используя эту технику, вы можете вызвать модальное окно с идентификатором = «identifier» с одной строкой JavaScript:

$('#identifier').modal(options)

Пример

Пример статического модального окна показан в следующем примере:

<h2>Пример создания модальный формы с начальной загрузкой в Twitter Bootstrap</h2>

<!-- Кнопка запуска модального окна -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Запуск демо
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               Это название модального окна
            </h4>
         </div>
         
         <div class = "modal-body">
            Добавьте сюда какой-нибудь текст
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Закрыть
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Внести изменения
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

Детали предыдущего кода:

Чтобы вызвать модальное окно, вам нужно иметь какой-то триггер. Вы можете использовать кнопку или ссылку. Здесь мы использовали кнопку.
Если посмотреть в коде выше, вы увидите, что в теге <button>, то data-target = «#myModal» является модальным объектом, который вы хотите загрузить на этой странице. Этот код позволяет создать несколько модальных окон на странице, а затем различные триггеры для каждого из них. Теперь, чтобы было ясно, вы не загружаете несколько модальных окон в одно и то же время, но вы можете создать много на страницах, которые будут загружены в разное время.
Есть два класса, чтобы принять к сведению в модальном окне:
- Первый .modal, который просто определяет содержание <div> как modal.
- И второе — это класс .fade. Когда модальное окон переключается, ее содержимое исчезают, и наоборот.
aria-labelledby=»myModalLabel», ссылка на атрибут заголовка модального окна.
Атрибут aria-hidden=»true» используется для того, чтобы сохранить модальное окно невидимым до появления триггера (как нажатие на соответствующую кнопку).
<div class = «modal-header»>, modal-header для класса, чтобы определить стиль для заголовка модального окна.
class = «close», это CSS для закрытия, который задает стиль для кнопки «close» в модальном окне.
data-dismiss = «modal», является настраиваемым атрибутом данных в HTML5. Здесь используется для закрытия модального окна.
class = «modal-body», это CSS-класс из начальной загрузки CSS, задает стиль для тела модального окна.
class = «modal-footer», это CSS-класс из начальной загрузки CSS, задает стиль для нижней части модального окна.
data-toggle = «modal», в HTML5 пользовательские данные атрибута data-toggle используется, чтобы открыть модальное окно.

Опции

Есть определенные параметры, которые можно передать через атрибуты данных или JavaScript, чтобы настроить внешний вид модального окна. В следующей таблице перечислены параметры:

Имя параметра	Тип/Значение по умолчанию	Данные имя атрибута	Описание
backdrop	логическое или строка «static» Значения по умолчанию: true	data-backdrop	Укажите static для фона, если вы не хотите чтобы модальное окно было закрыто, когда пользователь щелкает за пределами модального окна.
keyboard	логическое. По умолчанию: true	data-keyboard	Закрывает модальное окно при нажатии кнопки Закрыть; значение false, чтобы отключить.
show	логическое. По умолчанию: true	data-show	Показывает модальное окно при инициализации.
remote	Путь по умолчанию: false	data-remote	Использование JQuery метода .load, внедрить содержимое в модальное тело. Если HREF с действительной URL добавлен, он будет загружать содержимое. Пример этого показан ниже: <a data-toggle = "modal" href = "remote.html" data-target = "#modal">Нажмите на меня</a>

Методы

Вот некоторые полезные методы, которые могут быть использованы с modal().

метод	Описание	пример
Параметры — .modal(options)	Активизирует свое содержание как модальное окно. Принимает необязательный объект опций.	$('#identifier').modal({ keyboard: false })
Переключение — .modal( ‘toggle’)	Вручную переключает модальность.	$('#identifier').modal('toggle')
Показать — .modal(‘show’)	Вручную открывает модальное.	$('#identifier').modal('show')
Скрыть — .modal(‘hide’)	Вручную скрывает модальность.	$('#identifier').modal('hide')

Пример

Следующий пример демонстрирует использование методов:

<h2>Пример использования методов модального плагина</h2>

<!-- Кнопка модального триггера -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Запуск демо
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               Это название модального окна
            </h4>
         </div>
         
         <div class = "modal-body">
            Нажмите кнопку ESC для выхода.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Закрыть
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Внести изменения
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

Просто нажмите на кнопку Esc и модальное окно закроется.

События

В следующей таблице перечислены события для работы с модальным окнами. Эти события могут быть использованы для подключения в функцию.

Мероприятие	Описание	пример
show.bs.modal	Откроется после вызова метода show.	$('#identifier').on('show.bs.modal', function () { // сделать кое-что… })
shown.bs.modal	Возникает, когда модальное окно было сделано видимым для пользователя (будет ждать CSS переходы для завершения).	$('#identifier').on('shown.bs.modal', function () { // сделать кое-что… })
hide.bs.modal	Возникает, когда метод hide экземпляра был вызван.	$('#identifier').on('hide.bs.modal', function () { // сделать кое-что… })
hidden.bs.modal	Возникает, когда модальное окно было скрыто от пользователя.	$('#identifier').on('hidden.bs.modal', function () { // сделать кое-что… })

Пример

Следующий пример демонстрирует использование событий:

<h2>Пример использования событий модального плагина</h2>

<!-- Кнопка модального триггера -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Запуск демо
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               Это название модального окна
            </h4>
         </div>
         
         <div class = "modal-body">
            Нажмите на кнопку закрытия, чтобы проверить функциональность события.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Закрыть
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Внести изменения
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Эй, я слышал, ты любишь модалы...');})
   });
</script>

Как видно на приведенном выше экране, если нажать на кнопку Close, т.е. событие hide, отображается предупреждающее сообщение.