Модальный
Используйте модальный плагин Bootstrap JavaScript, чтобы добавить на свой сайт диалоги для лайтбоксов, пользовательских уведомлений или полностью настраиваемого контента.
Как это работает
Прежде чем приступить к работе с модальным компонентом Bootstrap, обязательно прочитайте следующее, так как параметры нашего меню недавно изменились.
- Модальные окна создаются с помощью HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и удаляют прокрутку,
<body>
чтобы вместо этого прокручивалось модальное содержимое. - Щелчок по модальному «фону» автоматически закроет модальное окно.
- Bootstrap поддерживает одновременно только одно модальное окно. Вложенные модальные окна не поддерживаются, так как мы считаем их неудобными для пользователя.
- Модальные окна используют
position: fixed
, что иногда может быть немного специфичным в отношении его рендеринга. По возможности размещайте свой модальный HTML на верхнем уровне, чтобы избежать возможных помех от других элементов. Скорее всего, вы столкнетесь с проблемами при вложении a.modal
в другой фиксированный элемент. - Еще раз, из-за
position: fixed
, есть некоторые предостережения относительно использования модальных окон на мобильных устройствах. Для получения подробной информации см. нашу документацию по поддержке браузера . - Из-за того, как HTML5 определяет свою семантику, атрибут
autofocus
HTML не влияет на модальные окна Bootstrap. Чтобы добиться того же эффекта, используйте собственный JavaScript:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
медиа-запроса. См.
раздел с ограниченным движением в нашей документации по специальным возможностям .
Продолжайте читать для демонстраций и руководств по использованию.
Примеры
Модальные компоненты
Ниже приведен пример статического модального окна (имеется в виду, что его position
и display
были переопределены). Включены модальный заголовок, модальное тело (обязательно для padding
) и модальный нижний колонтитул (необязательно). Мы просим вас включать модальные заголовки с действиями закрытия, когда это возможно, или предоставлять другое явное действие закрытия.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Прокрутка длинного контента
Когда модальные окна становятся слишком длинными для области просмотра или устройства пользователя, они прокручиваются независимо от самой страницы. Попробуйте демо ниже, чтобы увидеть, что мы имеем в виду.
Вы также можете создать модальное окно с возможностью прокрутки, которое позволяет прокручивать тело модального окна, добавив .modal-dialog-scrollable
в .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Вертикально по центру
Добавьте .modal-dialog-centered
, чтобы .modal-dialog
центрировать модальное окно по вертикали.
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-auto</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
и HTMLdata-bs-*
, чтобы изменять содержимое модального окна в зависимости от того, какая кнопка была нажата.
Ниже приведена живая демонстрация, за которой следуют примеры HTML и JavaScript. Для получения дополнительной информации ознакомьтесь с документацией по модальным событиям для получения подробной информации о relatedTarget
.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-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-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
Переключение между модальными окнами
Переключайтесь между несколькими модальными окнами с умным размещением атрибутов data-bs-target
и . data-bs-toggle
Например, вы можете переключить модальное окно сброса пароля из уже открытого модального окна входа. Обратите внимание, что несколько модальных окон не могут быть открыты одновременно — этот метод просто переключает между двумя отдельными модальными окнами.
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
Изменить анимацию
Переменная $modal-fade-transform
определяет состояние преобразования .modal-dialog
перед модальной анимацией постепенного появления, $modal-show-transform
переменная определяет преобразование .modal-dialog
в конце модальной анимации постепенного появления.
Если вы хотите, например, анимацию увеличения, вы можете установить $modal-fade-transform: scale(.8)
.
Удалить анимацию
Для модальных окон, которые просто появляются, а не исчезают при просмотре, удалите .fade
класс из модальной разметки.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Динамические высоты
Если высота модального окна изменяется, когда оно открыто, вы должны позвонить myModal.handleUpdate()
, чтобы изменить положение модального окна в случае появления полосы прокрутки.
Доступность
Обязательно добавьте aria-labelledby="..."
, ссылаясь на модальное название, в .modal
. Кроме того, вы можете дать описание своего модального диалога с помощью aria-describedby
on .modal
. Обратите внимание, что вам не нужно добавлять role="dialog"
, так как мы уже добавили его через JavaScript.
Встраивание видео с YouTube
Для встраивания видео с YouTube в модальные окна требуется дополнительный JavaScript, не входящий в Bootstrap, для автоматической остановки воспроизведения и т. д. См. этот полезный пост о переполнении стека для получения дополнительной информации.
Дополнительные размеры
Модальные окна имеют три необязательных размера, доступных через классы модификаторов для размещения в файле .modal-dialog
. Эти размеры срабатывают в определенных точках останова, чтобы избежать горизонтальных полос прокрутки на более узких окнах просмотра.
Размер | Учебный класс | Модальная максимальная ширина |
---|---|---|
Маленький | .modal-sm |
300px |
По умолчанию | Никто | 500px |
Большой | .modal-lg |
800px |
Очень большой | .modal-xl |
1140px |
Наше модальное окно по умолчанию без класса модификатора представляет собой модальное окно «среднего» размера.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Полноэкранный модальный
Другим переопределением является возможность всплывающего модального окна, которое закрывает область просмотра пользователя, доступную через классы модификаторов, размещенные в файле .modal-dialog
.
Учебный класс | Доступность |
---|---|
.modal-fullscreen |
Всегда |
.modal-fullscreen-sm-down |
Ниже576px |
.modal-fullscreen-md-down |
Ниже768px |
.modal-fullscreen-lg-down |
Ниже992px |
.modal-fullscreen-xl-down |
Ниже1200px |
.modal-fullscreen-xxl-down |
Ниже1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Сасс
Переменные
$modal-inner-padding: $spacer;
$modal-footer-margin-between: .5rem;
$modal-dialog-margin: .5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;
$modal-title-line-height: $line-height-base;
$modal-content-color: null;
$modal-content-bg: $white;
$modal-content-border-color: rgba($black, .2);
$modal-content-border-width: $border-width;
$modal-content-border-radius: $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs: $box-shadow-sm;
$modal-content-box-shadow-sm-up: $box-shadow;
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: $border-color;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-border-width;
$modal-header-padding-y: $modal-inner-padding;
$modal-header-padding-x: $modal-inner-padding;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
$modal-sm: 300px;
$modal-md: 500px;
$modal-lg: 800px;
$modal-xl: 1140px;
$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform .3s ease-out;
$modal-scale-transform: scale(1.02);
Петля
Отзывчивые полноэкранные модальные окна генерируются с помощью $breakpoints
карты и цикла в файлах scss/_modal.scss
.
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}
.modal-header {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
Применение
Модальный плагин переключает ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript. Он также переопределяет поведение прокрутки по умолчанию и создает .modal-backdrop
область щелчка для закрытия отображаемых модальных окон при нажатии вне модального окна.
Через атрибуты данных
Переключать
Активируйте модальное окно без написания JavaScript. Установите data-bs-toggle="modal"
элемент контроллера, например кнопку, вместе с data-bs-target="#foo"
или href="#foo"
, чтобы настроить конкретное модальное окно для переключения.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Увольнять
Увольнение может быть достигнуто с помощью data
атрибута кнопки в модальном окне , как показано ниже:
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
или на кнопке вне модальногоdata-bs-target
окна, как показано ниже:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Через JavaScript
Создайте модальное окно с помощью одной строки JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Опции
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-bs-
, как в data-bs-backdrop=""
.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
backdrop |
логическое значение или строка'static' |
true |
Включает элемент модального фона. В качестве альтернативы укажите static фон, который не закрывает модальное окно при нажатии. |
keyboard |
логический | true |
Закрывает модальное окно при нажатии клавиши escape |
focus |
логический | true |
Ставит фокус на модальное окно при инициализации. |
Методы
Асинхронные методы и переходы
Все методы API являются асинхронными и запускают переход . Они возвращаются к вызывающей стороне сразу после начала перехода, но до его завершения . Кроме того, вызов метода переходного компонента будет игнорироваться .
Дополнительную информацию см. в нашей документации по JavaScript .
Варианты прохождения
Активирует ваш контент как модальный. Принимает необязательные параметры object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
переключать
Вручную переключает модальное окно. Возвращает вызывающему объекту до того, как модальное окно действительно было показано или скрыто (т. е. до того, как произошло событие shown.bs.modal
или ).hidden.bs.modal
myModal.toggle()
показывать
Вручную открывает модальное окно. Возвращает вызывающему объекту до того, как модальное окно действительно будет показано (т. е. до того , как shown.bs.modal
произойдет событие).
myModal.show()
Кроме того, вы можете передать элемент DOM в качестве аргумента, который можно получить в модальных событиях (как relatedTarget
свойство).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
Спрятать
Вручную скрывает модальное окно. Возвращает вызывающему объекту до того, как модальное окно будет фактически скрыто (т. е. до того , как hidden.bs.modal
произойдет событие).
myModal.hide()
обработать обновление
Вручную отрегулируйте положение модального окна, если высота модального окна изменяется, когда оно открыто (например, в случае появления полосы прокрутки).
myModal.handleUpdate()
распоряжаться
Уничтожает модальное окно элемента. (Удаляет сохраненные данные в элементе DOM)
myModal.dispose()
получить экземпляр
Статический метод, который позволяет вам получить модальный экземпляр, связанный с элементом DOM.
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Статический метод, который позволяет вам получить модальный экземпляр, связанный с элементом DOM, или создать новый, если он не был инициализирован.
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
События
Модальный класс Bootstrap предоставляет несколько событий для подключения к модальным функциям. Все модальные события запускаются в самом модальном окне (т.е. в <div class="modal">
).
Тип события | Описание |
---|---|
show.bs.modal |
Это событие срабатывает сразу же при show вызове метода экземпляра. Если это вызвано щелчком, элемент, по которому щелкнули, доступен как relatedTarget свойство события. |
shown.bs.modal |
Это событие запускается, когда модальное окно становится видимым для пользователя (будет ждать завершения переходов CSS). Если это вызвано щелчком, элемент, по которому щелкнули, доступен как relatedTarget свойство события. |
hide.bs.modal |
Это событие запускается сразу после hide вызова метода экземпляра. |
hidden.bs.modal |
Это событие запускается, когда модальное окно больше не скрыто от пользователя (будет ждать завершения переходов CSS). |
hidePrevented.bs.modal |
Это событие запускается, когда отображается модальное окно, его фон static и щелчок за пределами модального окна или нажатие клавиши Escape выполняется с параметром клавиатуры или data-bs-keyboard установлено значение false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})