Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Модальные окна Имеют обтекаемую форму, но гибкая, диалоговое окно с минимальным набором функций и по умолчанию.
autofocus
атрибут HTML не имеет никакого эффекта в Bootstrap модальные глаголы. для достижения такого же эффекта, использовать некоторые пользовательские JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
Не открывайте новое модальное окно пока другое всё ещё открыто. Отображение более одного модального окна требует написание дополнительного пользовательского кода.
Всегда старайтесь поместить разметку модального окна в верхнем уровне HTML-документа, чтобы избежать влияния других элементов на внешний вид модального окна и/или его функциональность.
Существуют некоторые предостережения относительно использования глагола на мобильных устройствах. Смотрите наши документы поддержки браузера для деталей.
Обработанную модальное окно Заголовок, тело, и набор действий в футере.
<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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><!-- /.модальное окно -->
Переключить модальное окно через JavaScript нажав на кнопку ниже. Он будет скользить вниз и исчезают в верхней части страницы.
<!-- Кнопка запуска модального окна -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Модальное окно -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</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>
Не забудьте добавить role="dialog"
и aria-labelledby="..."
, ссылаясь на модальное окно Заголовок, чтобы .modal
, и role="document"
к .modal-dialog
сам.
Кроме того, вы можете дать описание вашего модальное окно диалог с aria-describedby
на .modal
.
Встраивание видео YouTube в модальности требует дополнительных JavaScript не в Bootstrap чтобы автоматически остановить воспроизведение и многое другое. Ознакомиться с этой полезной переполнение стека пост для получения дополнительной информации.
Модальные окна Имеют два дополнительных размера, доступные через классы модификатор, который будет размещен на .modal-dialog
. Эти размеры ударом в некоторые точки останова, чтобы избежать горизонтальной полосы прокрутки на узких окнах.
<!-- Большие модальное окно -->
<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>
<!-- Небольшой модальное окно -->
<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>
Для модальности, которые просто появляются, а не исчезают, просмотреть, удалить .fade
класс от модальное окно разметки.
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
...
</div>
Чтобы воспользоваться преимуществами Bootstrap блочная система в модальное окно, просто гнездо .container-fluid
В .modal-body
, а затем использовать обычные блочная система классов внутри этого контейнера.
<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="container-fluid bd-example-row">
<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-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="bd-example bd-example-padded-bottom">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
Launch demo modal
</button>
</div>
Есть куча кнопок, вызывает модальное окно, просто с немного разным содержанием? Используйте event.relatedTarget
и HTML data-*
атрибуты (возможно через jQuery) варьировать содержимым модального окна в зависимости от того, какая кнопка была нажата. См подробные сведения в документации Модальных событий relatedTarget
.
<div class="bd-example">
<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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</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>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Кнопка, что спровоцировало модальное окно
var recipient = button.data('whatever') // Извлечение информации из данных-* атрибутов
// Если необходимо, вы могли бы начать здесь AJAX-запрос (и выполните обновление в обратного вызова).
// Обновление модальное окно Контента. Мы будем использовать jQuery здесь, но вместо него можно использовать привязки данных библиотеки или других методов.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
Если Высота модальное окно изменения во время ее открытия, Вам необходимо позвонить $('#myModal').data('bs.modal').handleUpdate()
подрегулировать модальное окно’s позиции в случае появляется полоса прокрутки.
В модальное окно плагин переключает ваш скрытый Контент по требованию, через атрибуты данных или 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>
Вызов модальное окно с кодом myModal
С одной строки JavaScript:
$('#myModal').modal(options)
Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data-
, а на data-backdrop=""
.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
backdrop | boolean or the string 'static' |
true | Включает в себя модальное окно-фон элемента. Кроме того, укажите static на фоне которого не закрыть модальное окно по щелчку. |
keyboard | boolean | true | Замыкает модальное окно При нажатии клавиши Escape |
show | boolean | 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) {
// сделать что-то...
})