Bootstrap - Модальный плагин

: Категория: Bootstrap 3; Опубликовано: 23 сентября 2018; Просмотров: 1891

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

Содержание:

Применение модального плагина
Опции внешнего вида
Методы модального плагина
События

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

Применение модального плагина

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

Через атрибуты данных. Установите атрибут data-toggle = "modal" на элемент контроллера, например, кнопку или ссылку, а также target-target = "#identifier" или href = "#identifier", чтобы настроить конкретный модальный (с id = "identifier") для переключения.
Через JavaScript. Используя эту технику, вы можете вызвать модальный идентификатор id = "identifier" с одной строкой JavaScript -
```
    $('#identifier').modal(options)
```

Пример статического модального окна показан ниже -

<h2>Example of creating Modals with Twitter Bootstrap</h2>
 
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</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">
               This Modal title
            </h4>
         </div>
        
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
           
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
        
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
 
</div><!-- /.modal -->

Подробная информация о предыдущем коде -

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

Опции внешнего вида

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

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

Методы модального плагина

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

Метод	Описание	Пример
Options - .modal(options)	Активирует ваш контент как модальный. Принимает необязательный объект опций.	$('#identifier').modal({ keyboard: false })
Toggle − .modal('toggle')	Вручную переключает модальный режим.	$('#identifier').modal('toggle')
Show − .modal('show')	Вручную открывается модальный.	$('#identifier').modal('show')
Hide − .modal('hide')	В ручном режиме скрывается модальный.	$('#identifier').modal('hide')

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

<h2>Example of using methods of Modal Plugin</h2>
 
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal1">
   Launch demo modal
</button>
 
<!-- Modal -->
<div class = "modal fade" id = "myModal1" tabindex = "-1" role = "dialog"
   aria-labelledby = "myModalLabel1" 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 = "myModalLabel1">
               This Modal title
            </h4>
         </div>
        
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
        
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
           
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
        
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->
 
<script>
   $(function () { $('#myModal1').modal({
      keyboard: true
   })});
</script>

Просто нажмите кнопку Esc, и модальное окно выйдет.

События

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

Событие	Описание	Пример
show.bs.modal	Вызывается после вызова метода show.	$("#identifier").on("show.bs.modal", function () { // do something… })<pre></td></tr> <tr><td>shown.bs.modal</td><td>Вызывается, когда модаль становится видимой для пользователя (будет ждать завершения CSS-переходов).</td><td><pre>$("#identifier").on("shown.bs.modal", function () { // do something… })
hide.bs.modal	Вызывается, когда вызван метод экземпляра hide.	$("#identifier").on("hide.bs.modal", function () { // do something… })
hidden.bs.modal	Выключен, когда модальный закончен, будучи скрытым от пользователя.	$("#identifier").on("hidden.bs.modal", function () { // do something… })

Событие

Описание

Пример

show.bs.modal

Вызывается после вызова метода show.

$("#identifier").on("show.bs.modal", function () {
   // do something…
})<pre></td></tr>
<tr><td>shown.bs.modal</td><td>Вызывается, когда модаль становится видимой для пользователя (будет ждать завершения CSS-переходов).</td><td><pre>$("#identifier").on("shown.bs.modal", function () {
   // do something…
})

hide.bs.modal

Вызывается, когда вызван метод экземпляра hide.

$("#identifier").on("hide.bs.modal", function () {
   // do something…
})

hidden.bs.modal

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

$("#identifier").on("hidden.bs.modal", function () {
   // do something…
})

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

<h2>Example of using events of Modal Plugin</h2>
 
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal2">
   Launch demo modal
</button>
 
<!-- Modal -->
<div class = "modal fade" id = "myModal2" tabindex = "-1" role = "dialog"
   aria-labelledby = "myModalLabel2" 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 = "myModalLabel2">
               This Modal title
            </h4>
         </div>
        
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
        
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
           
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
        
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->
 
<script>
   $(function () { $('#myModal2').modal('hide')})});
</script>
 
<script>
   $(function () { $('#myModal2').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

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

Bootstrap - Модальный плагин

Применение модального плагина

Опции внешнего вида

Методы модального плагина

События

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

Поделиться в соцсетях

Подписаться на канал

ТОП-10 статей

Свежие записи