Учебники

Bootstrap — Модальный Плагин

Октябрь 25, 2018

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

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

использование

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

  • Через атрибуты данных — Установите атрибут data-toggle = «modal» для элемента контроллера, такого как кнопка или ссылка, вместе с data-target = «#identifier» или href = «#identifier» для нацеливания на определенный модал (с id = «идентификатор») для переключения.

  • С помощью JavaScript — используя эту технику, вы можете вызвать модал с id = «identifier» с одной строкой JavaScript —

Через атрибуты данных — Установите атрибут data-toggle = «modal» для элемента контроллера, такого как кнопка или ссылка, вместе с data-target = «#identifier» или href = «#identifier» для нацеливания на определенный модал (с id = «идентификатор») для переключения.

С помощью 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">
                  &times;
            </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, который устанавливает стиль для кнопки Close модального окна.

  • data-dismiss = «modal» , пользовательский атрибут данных HTML5. Здесь это используется, чтобы закрыть модальное окно.

  • class = «modal-body» , это CSS-класс Bootstrap CSS для установки стиля тела модального окна.

  • class = «modal-footer» , это CSS-класс Bootstrap CSS для установки стиля для нижнего колонтитула модального окна.

  • data-toggle = «modal» , пользовательский атрибут данных HTML5 data-toggle используется для открытия модального окна.

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

Если вы посмотрите на приведенный выше код, то увидите, что в теге <button> data-target = «#myModal» является целью модала, который вы хотите загрузить на страницу. Этот код позволяет создавать несколько модальных страниц на странице, а затем иметь разные триггеры для каждого из них. Теперь, чтобы быть понятным, вы не загружаете несколько модов одновременно, но вы можете создать много на страницах, которые будут загружаться в разное время.

Есть два класса, на которые стоит обратить внимание в модале:

Первым является .modal , который просто идентифицирует содержимое <div> как модальное.

И второй — класс .fade . Когда модальное переключается, это заставит контент исчезать и исчезать.

aria-labelledby = «myModalLabel» , атрибут ссылается на модальное название.

Атрибут aria-hidden = «true» используется для того, чтобы модальное окно оставалось невидимым до тех пор, пока не сработает триггер (например, щелчок по соответствующей кнопке).

<div class = «modal-header»>, modal-header — это класс, который определяет стиль для заголовка модального окна.

class = «close» , это CSS-класс close, который устанавливает стиль для кнопки Close модального окна.

data-dismiss = «modal» , пользовательский атрибут данных HTML5. Здесь это используется, чтобы закрыть модальное окно.

class = «modal-body» , это CSS-класс Bootstrap CSS для установки стиля тела модального окна.

class = «modal-footer» , это CSS-класс Bootstrap CSS для установки стиля для нижнего колонтитула модального окна.

data-toggle = «modal» , пользовательский атрибут данных HTML5 data-toggle используется для открытия модального окна.

Опции

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

Название варианта Тип / Значение по умолчанию Имя атрибута данных Описание
фон логическое значение или строка ‘static’ По умолчанию: true данные фон Укажите статический фон, если вы не хотите, чтобы модальное окно закрывалось, когда пользователь щелкает за пределами модального окна.
клавиатура логическое значение по умолчанию: true данных клавиатуры Закрывает модальный режим при нажатии клавиши выхода; установите в false, чтобы отключить.
шоу логическое значение по умолчанию: true Данные показывают Показывает модальный при инициализации.
дистанционный пульт путь по умолчанию: false данных дистанционного

Используя метод jQuery .load , вставьте содержимое в модальное тело. Если добавить ссылку с допустимым URL-адресом, он загрузит этот контент. Пример этого показан ниже — 

<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>

Используя метод jQuery .load , вставьте содержимое в модальное тело. Если добавить ссылку с допустимым URL-адресом, он загрузит этот контент. Пример этого показан ниже —

методы

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

метод Описание пример
Опции — .modal (опции) Активирует ваш контент как модальный. Принимает необязательные параметры объекта. 
$('#identifier').modal({
   keyboard: false
})
Toggle — .modal (‘toggle’) Вручную переключает модал. 
$('#identifier').modal('toggle')
Показать — .modal (‘показать’) Вручную открывает модал. 
$('#identifier').modal('show')
Скрыть — .modal («скрыть») Вручную скрывает модал. 
$('#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 = "#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">
            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 () { $('#myModal').modal({
      keyboard: true
   })});
</script>

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

События

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

Событие Описание пример
show.bs.modal Запускается после вызова метода show. 
$('#identifier').on('show.bs.modal', function () {
   // do something…
})
shown.bs.modal Запускается, когда модал становится видимым для пользователя (будет ожидать завершения переходов CSS). 
$('#identifier').on('shown.bs.modal', function () {
   // do something…
})
hide.bs.modal Вызывается, когда вызывается метод скрытия экземпляра. 
$('#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 = "#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">
            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 () { $('#myModal').modal('hide')})});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

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

49
Share: