ОСНОВНОЕ

WORDPRESS

Операционные системы

Базы данных

Фреймворк Bootstrap

Кто живет надеждой, рискует умереть голодной смертью (Б. Франклин).

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

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Bootstrap - Модальный плагин
Модальное окно это дочернее окно, которое наслаивается над его родительское окно. Как правило, цель состоит в том, чтобы отобразить содержимое из отдельного источника, который может иметь некоторое взаимодействие, не выходя из родительского окна. Дочерние окна могут предоставить информацию, взаимодействие, или что-то другое.

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

Применение

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

  • С помощью атрибутов данных – набор атрибутов data-toggle=”modal” на элементе контроллера, как кнопка или ссылка, вместе с data-target=”#identifier” или target="_blank" href=”#identifier” для нацеливания на определенную модальность (с ID = “идентификатор”) для переключения.
  • С помощью JavaScript – Используя эту технику, вы можете вызвать модальное окно с идентификатором = «identifier» с одной строкой JavaScript:

Пример

Пример статического модального окна показан в следующем примере:

 

Детали предыдущего кода:

  • Чтобы вызвать модальное окно, вам нужно иметь какой-то триггер. Вы можете использовать кнопку или ссылку. Здесь мы использовали кнопку.
  • Если посмотреть в коде выше, вы увидите, что в теге <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 добавлен, он будет загружать содержимое. Пример этого показан ниже:
 

Методы

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

методОписаниепример
Параметры – .modal(options)Активизирует свое содержание как модальное окно. Принимает необязательный объект опций.
Переключение – .modal( ‘toggle’)Вручную переключает модальность.
Показать – .modal(‘show’)Вручную открывает модальное.
Скрыть – .modal(‘hide’)Вручную скрывает модальность.

Пример

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

 

Просто нажмите на кнопку Esc и модальное окно закроется.

События

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

МероприятиеОписаниепример
show.bs.modalОткроется после вызова метода show.
shown.bs.modalВозникает, когда модальное окно было сделано видимым для пользователя (будет ждать CSS переходы для завершения).
hide.bs.modalВозникает, когда метод hide экземпляра был вызван.
hidden.bs.modalВозникает, когда модальное окно было скрыто от пользователя.

Пример

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

 

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

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

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

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

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

Простая логическая игра "Поймай кота". Задача игры окружить кота точками так, чтобы он не смог убежать с поля. Постигла неудача - начни игру снова!

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

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

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

close
galka

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

close