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

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

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

<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Нажмите на меня</a>

Методы

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

$('#identifier').modal({
   keyboard: false
})

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

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

$('#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 и модальное окно закроется.

События

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

$('#identifier').on('show.bs.modal', function () {
   // сделать кое-что…
})

$('#identifier').on('shown.bs.modal', function () {
   // сделать кое-что…
})

$('#identifier').on('hide.bs.modal', function () {
   // сделать кое-что…
})

$('#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, отображается предупреждающее сообщение.

Читайте также

Warning: Undefined variable $tag_ids in /var/www/andreyex/data/www/andreyex.ru/wp-content/themes/sunrain/page-learn-bootstrap.php on line 192

Blizzard выпускает патч 1.1.0c для Diablo 4 с множеством исправлений ошибок

2 года назад

Microsoft подтверждает ошибку Windows, переименовывающую принтеры в HP LaserJet

1 год назад

Доработка и модернизация сайтов в 2025 году: преимущества и ключевые аспекты

2 месяца назад