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

Если вы хотите включить эту функциональность плагина индивидуально, вам понадобится 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, чтобы настроить внешний вид Модального окна. В следующих таблицах перечислены варианты -

Название опции Тип/значение по умолчанию Имя атрибута данных Описание
backdropboolean или строка 'static' Значение по умолчанию: truedata-backdropЗадайте статичность для фона, если вы не хотите, чтобы модаль был закрыт, когда пользователь нажимает кнопку вне модальности.
keyboardboolean Значение по умолчанию: truedata-keyboardЗакрывает модальность при нажатии клавиши эвакуации; установите значение false для отключения.
showboolean Значение по умолчанию: truedata-showПоказывает модальность при инициализации.
remotepath По умолчанию: falsedata-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…
})

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

<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, т.е. скройте событие, появится предупреждающее сообщение.




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

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok