ИТ Блог. Создание сайтов с применением Bootstrap
(1 оценок, среднее: 5,00 из 5)
Загрузка...
Модальное окно это дочернее окно, которое наслаивается над его родительское окно. Как правило, цель состоит в том, чтобы отобразить содержимое из отдельного источника, который может иметь некоторое взаимодействие, не выходя из родительского окна. Дочерние окна могут предоставить информацию, взаимодействие, или что-то другое.
Если вы хотите включить эту функциональность плагина в отдельности, то вам нужен modal.js. В противном случае, как уже упоминалось в главе Обзор плагинов Bootstrap, вы можете включить bootstrap.js или минимизированный bootstrap.min.js.
Вы можете включить скрытое содержание с помощью плагина модального окна:
$('#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">
×
</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 -->
Детали предыдущего кода:
Есть определенные параметры, которые можно передать через атрибуты данных или JavaScript, чтобы настроить внешний вид модального окна. В следующей таблице перечислены параметры:
| Имя параметра | Тип/Значение по умолчанию | Данные имя атрибута | Описание |
|---|---|---|---|
| backdrop | логическое или строка «static» Значения по умолчанию: true | data-backdrop | Укажите static для фона, если вы не хотите чтобы модальное окно было закрыто, когда пользователь щелкает за пределами модального окна. |
| keyboard | логическое. По умолчанию: true | data-keyboard | Закрывает модальное окно при нажатии кнопки Закрыть; значение false, чтобы отключить. |
| show | логическое. По умолчанию: true | data-show | Показывает модальное окно при инициализации. |
| remote | Путь по умолчанию: false | data-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, отображается предупреждающее сообщение.
