Ценить высоко мнение людей будет для них слишком большой честью (А. Шопенгауэр).

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

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
6 октября 2017
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, чтобы настроить внешний вид модального окна. В следующей таблице перечислены параметры:

Имя параметраТип/Значение по умолчаниюДанные имя атрибутаОписание
backdropлогическое или строка «static» Значения по умолчанию: truedata-backdropУкажите static для фона, если вы не хотите чтобы модальное окно было закрыто, когда пользователь щелкает за пределами модального окна.
keyboardлогическое. По умолчанию: truedata-keyboardЗакрывает модальное окно при нажатии кнопки Закрыть; значение false, чтобы отключить.
showлогическое. По умолчанию: truedata-showПоказывает модальное окно при инициализации.
remoteПуть по умолчанию: falsedata-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, отображается предупреждающее сообщение.

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 163

Если статья понравилась, то поделитесь ей в социальных сетях:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close