Модальные окна
Модальные окна - это упорядоченные, но гибкие диалоговые подсказки, основанные на JavaScript. Они поддерживают несколько вариантов использования от уведомлений пользователям до полностью настриваемого контента и имеют несколько полезных подкомпонентов, размеров и т.д.
Содержание
Как это работает
Прежде чем начать работу с модальным компонентом Bootstrap, обязательно прочитайте следующее, поскольку параметры нашего меню недавно изменились .
- Модальные окна построены с использованием HTML, CSS и JavaScript. Они расположены поверх всего остального в документе и удаляют прокрутку из
<body>
, чтобы прокручивать модальный контент. - Щелчок по модальному «фону» автоматически закроет модальное окно.
- Bootstrap поддерживает только одно модальное окно за раз. Вложенные модали не поддерживаются, поскольку мы считаем их неудовлетворительными.
- Модальные окна используют
position: fixed
, что иногда может быть немного специфично для его рендеринга. По возможности размещайте свой модальный HTML в верхнем уровне, чтобы избежать возможных помех от других элементов. Вероятно, у вас возникнут проблемы при вложении.modal
в другой фиксированный элемент. - И снова, благодаря
position: fixed
, есть некоторые оговорки с использованием модальных окон на мобильных устройствах. Подробнее см. в нашей документации поддержки браузера. - Наконец, HTML атрибут
autofocus
не влияет на модальные окна. Вот как вы можете добиться такого же эффекта с помощью пользовательского JavaScript.
Продолжайте читать для демонстраций и руководств по использованию.
- Из-за того, как HTML5 определяет его семантику, the
autofocus
HTML attribute не имеет никакого эффекта в модальных окнах Bootstrap. Чтобы добиться такого же эффекта, используйте некоторый настраиваемый JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
Примеры
Модальные компоненты
Ниже представлен пример статического модального окна (это означает, что его position
и display
были переопределены). Включаются модальный заголовок, модальный текст (обязательный для padding
), и модальный нижний колонтитул (необязательно). Мы просим вас включать модальные заголовки с отклонением, когда это возможно, или предоставить другое явное действие по отклонению.
<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Живое демо
Переключитесь на работу с модальным демо, нажав кнопку ниже. Оно соскользнет вниз и исчезнет с верхней части страницы.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Прокрутка длинного содержимого
Когда модальные окна становятся слишком длинными для экрана или устройства пользователя, они прокручиваются независимо от самой страницы. Попробуйте демо ниже, чтобы понять, что мы имеем в виду.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Всплывающие подсказки и подсказки
Подсказки и Информеры могут быть размещены в модальных окнах по мере необходимости. Когда модальные окна закрыты, любые всплывающие подсказки и подсказки также автоматически отклоняются.
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
Использование сетки
Используйте сетку Bootstrap в модальном окне путм вложения .container-fluid
в .modal-body
. Затем используйте обычные системные классы сетки, как и в любом другом месте.
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
Изменение модального контента
Есть куча кнопок, которые запускают одно и то же модыльное окно с немного различающимся содержимым? Используйте атрибуты event.relatedTarget
и HTML data-*
attributes (возможно via jQuery) чтобы варьировать содержимое модального окна в зависимости от того, какая кнопка была нажата.
Ниже приводится демонстрационная версия, сопровождаемая примером HTML и JavaScript. Для получения дополнительной информации ознакомьтесь с документацией по модальным окнам для получения подробной информации о relatedTarget
.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
Удалить анимацию
Для модальных окон, которые просто появляются, а не исчезают для просмотра, удалите класс .fade
из вашей модальной разметки.
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
...
</div>
Динамическая высота
Если высота модального окна изменяется, когда оно открыто, вы должны вызывать $('#myModal').data('bs.modal').handleUpdate()
для корректировки положения модального окна в случае появления полосы прокрутки.
Доступность
Обязательно добавьте role="dialog"
и aria-labelledby="..."
, ссылаясь на модальный заголовок, на .modal
, и role="document"
в сам .modal-dialog
. Кроме того, вы можете дать описание вашего модального диалога с aria-describedby
на .modal
.
Встраивание видео на YouTube
Для встраивания видео YouTube в модальные окна требуется дополнительный JavaScript, а не в Bootstrap, чтобы автоматически остановить воспроизведение и многое другое. Дополнительную информацию см. в этой статье, посвященной Overflow.
Дополнительные размеры
Модали имеют два дополнительных размера, доступные через модификаторы классов, которые будут размещены на .modal-dialog
. Эти размеры включаются в определенные точки останова, чтобы избежать горизонтальных полос прокрутки на более узких экранах.
<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
Применение
Модальный плагин переключает ваш скрытый контент по запросу, через атрибуты данных или JavaScript. Он также добавляет .modal-open
к <body>
для изменения поведения прокрутки по умолчанию и генерирует .modal-backdrop
для предоставления области щелчка для отклонения показанных модальных окон при нажатии вне модального окна.
Через атрибуты данных
Активируйте модальные окна без написания JavaScript. Установите data-toggle="modal"
в контроллере элемента, такого как кнопка, рядом с data-target="#foo"
или href="#foo"
чтобы нацелить определенную модаль для переключения.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Через JavaScript
Вызывайте модаль с помощью id myModal
с лаконичной записью на JavaScript:
$('#myModal').modal(options)
Параметры
Параметры могут передаваться через атрибуты данных или JavaScript. В случае передачи через атрибуты данных, добавьте приставку с названием параметра data-
, как в примере: data-backdrop=""
.
Название | Тип | По умолчанию | Описание |
---|---|---|---|
backdrop | логический или строковый 'static' |
true | Включает элемент modal-backdrop. Можно также указать static для фона, который не закрывает модальное окно при клике. |
keyboard | логический | true | Закрытие модального окна при клике на клавишу escape. |
focus | логический | true | Устанавливает фокус на модальном окне при инициализации. |
show | логический | true | Показывает модаль при инициализации. |
Методы
.modal(options)
Активизирует содержимое как модальное. Принимает необязательный параметр с типом данных object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Ручное переключение модали. Возвращается к инициатору перед фактическим показом или сокрытием модали (то есть, перед запуском событий shown.bs.modal
или hidden.bs.modal
).
$('#myModal').modal('toggle')
.modal('show')
Ручное отображение модали. Возвращается к инициатору перед фактическим показом модали (то есть, перед запуском события shown.bs.modal
).
$('#myModal').modal('show')
.modal('hide')
Ручное сокрытие модали. Возвращается к инициатору перед сокрытием модали (то есть, перед запуском события hidden.bs.modal
).
$('#myModal').modal('hide')
События
Класс модали в Bootstrap предоставляет несколько событий, чтобы обеспечить функциональность модали. Все модальные события возбуждаются в самом модальном режиме (т.е. в <div class="modal">
).
Тип События | Описание |
---|---|
show.bs.modal | Это событие срабатывает во время вызова метода show . Если вызов происходит за клик, то элемент, на котором был этот клик, доступен как свойство события relatedTarget . |
shown.bs.modal | Это событие вызывается, когда модальное окно становится видимым для пользователя (будет ждать завершения CSS-переходов). Если вызвано щелчком, элемент, на котором был клик, доступен как свойство события relatedTarget . |
hide.bs.modal | Это событие вызывается немедленно при вызове метода hide . |
hidden.bs.modal | Это событие вызывается, когда модаль завершит скрытие от пользователя (будет ждать завершения переходов CSS). |
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})