Модальное окно
Используйте модальный плагин Bootstrap для добавления на ваш сайт диалогов для лайтбоксов, уведомлений пользователей или настраиваемого контента.
Как это работает
До того как начать работу с модальными компонентами Bootstrap, ознакомьтесь со следующей информацией, т.к. параметры недавно изменились.
- Модальные окна сделаны на HTML, CSS и JavaScript. Они располагаются поверх всего документа и блокируют прокрутку тела документа
<body>, вместо него прокручивая модальные окна - Клик вне модального элемента автоматически закрывает его.
- Bootstrap позволяет активировать лишь один модальный элемент за раз. Вложенные модальные элементы не поддерживаются, т.к. мы думаем, что они принесли бы неудобства.
- Модальные элементы имеют
position: fixed, что может вызвать иногда их частичную отрисовку. Мы рекомендуем размещать модальные элементы на самом верху страницы, когда возможно, для избегания сбоев и влияния других элементов на корректную работу модальных элементов.modal. - Опять же – из-за
position: fixedесть некоторые сложности при использовании их на мобильных устройствах. Смотри документацию поддержки в браузерах. - Из-за семантики HTML5 атрибут
autofocusне работает с модальными элементами Bootstrap. Чтобы добиться такого же эффекта, используйте собственный JavaScript:
$('#myModal').on('shown.bs.modal',function(){$('#myInput').trigger('focus')})prefers-reduced-motion. См. Раздел с уменьшенным движением в нашей документации по специальным возможностям.
Продолжайте читать, чтобы увидеть демонстрации и инструкции по использованию.
Примеры
Модальные компоненты
Ниже – пример статичного модального компонента (это значит, что его position и display «преодолены»). В примере есть заголовок модального компонента, тело (требуется для padding), футер модального компонента (по желанию). Мы советуем включать заголовки с отклонением действия, когда возможно, или обеспечить другой явный путь отклонить действие.
<divclass="modal"tabindex="-1"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title">Заголовок модального окна</h5><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button></div><divclass="modal-body"><p>Здесь основной текст модального окна</p></div><divclass="modal-footer"><buttontype="button"class="btn btn-secondary"data-dismiss="modal">Закрыть</button><buttontype="button"class="btn btn-primary">Сохранить изменения</button></div></div></div></div>«Живое» демо
Изменяйте (скрывайте\показывайте) рабочий пример модального элемента по клику на кнопку ниже. Окно сползет вниз и возникнет в верху страницы.
<!-- Кнопка-триггер модального окна --><buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal"> Запустить демонстрацию модального окна
</button><!-- Модальное окно --><divclass="modal fade"id="exampleModal"tabindex="-1"aria-labelledby="exampleModalLabel"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title"id="exampleModalLabel">Заголовок модального окна</h5><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button></div><divclass="modal-body"> ... </div><divclass="modal-footer"><buttontype="button"class="btn btn-secondary"data-dismiss="modal">Закрыть</button><buttontype="button"class="btn btn-primary">Сохранить изменения</button></div></div></div></div>Статический фон
Когда фон установлен на статический, модаль не будет закрываться при нажатии за его пределами. Нажмите кнопку ниже, чтобы попробовать.
<!-- Button trigger modal --><buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#staticBackdrop"> Запустить модальное окно со статическим фоном
</button><!-- Модальное окно --><divclass="modal fade"id="staticBackdrop"data-backdrop="static"data-keyboard="false"tabindex="-1"aria-labelledby="staticBackdropLabel"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title"id="staticBackdropLabel">Заголовок модального окна</h5><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button></div><divclass="modal-body"> ... </div><divclass="modal-footer"><buttontype="button"class="btn btn-secondary"data-dismiss="modal">Закрыть</button><buttontype="button"class="btn btn-primary">Понял</button></div></div></div></div>Прокрутка длинного содержимого
Когда модальные элементы становятся слишком длинными для зоны видимости девайса, они прокручиваются независимо от самой страницы. Попробуйте пример ниже.
Вы также можете создать модальное окно с возможностью прокрутки, которое позволяет прокручивать тело модального окна, добавив .modal-dialog-scrollable к .modal-dialog.
<!-- Прокручиваемое модальное окно --><divclass="modal-dialog modal-dialog-scrollable"> ...
</div>Вертикальное центрирование
Добавьте .modal-dialog-centered в .modal-dialog чтобы вертикально центрировать модальное окно.
<!-- Вертикально выравненное модальное окно --><divclass="modal-dialog modal-dialog-centered"> ...
</div><!-- Вертикально выравненное прокручиваемое модальное окно --><divclass="modal-dialog modal-dialog-centered modal-dialog-scrollable"> ...
</div>Всплывающие подсказки и возникающие подсказки
Всплывающие подсказки и возникающие подсказки можно размещать как необходимо. Когда модальные элементы закрыты, любые всплывающие подсказки и возникающие подсказки внутри них также автоматически отменяются.
<divclass="modal-body"><h5>Popover in a modal</h5><p>This <ahref="#"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><ahref="#"class="tooltip-test"title="Tooltip">This link</a> and <ahref="#"class="tooltip-test"title="Tooltip">that link</a> have tooltips on hover.</p></div>Использование сетки
Используйте систему сеток Bootstrap внутри модального элемента, расположив .container-fluid внутри .modal-body. После этого используйте обычную систему сеток обычным образом.
<divclass="modal-body"><divclass="container-fluid"><divclass="row"><divclass="col-md-4">.col-md-4</div><divclass="col-md-4 ml-auto">.col-md-4 .ml-auto</div></div><divclass="row"><divclass="col-md-3 ml-auto">.col-md-3 .ml-auto</div><divclass="col-md-2 ml-auto">.col-md-2 .ml-auto</div></div><divclass="row"><divclass="col-md-6 ml-auto">.col-md-6 .ml-auto</div></div><divclass="row"><divclass="col-sm-9"> Уровень 1: .col-sm-9 <divclass="row"><divclass="col-8 col-sm-6"> Уровень 2: .col-8 .col-sm-6 </div><divclass="col-4 col-sm-6"> Уровень 2: .col-4 .col-sm-6 </div></div></div></div></div></div>Комбинируйте содержимое модальных элементов
Есть много кнопок, которые все запускают один модальный элемент со слегка разным содержимым? Используйте event.relatedTarget и атрибуты data-* (возможно через jQuery) для изменения содержимого в зависимости от нажатой кнопки.
Ниже – пример демо с кодом HTML и JavaScript. Для информации по relatedTarget читайте инфо по событиям модальных элементов.
<buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal"data-whatever="@mdo">Открыть модальное окно для @mdo</button><buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal"data-whatever="@fat">Открыть модальное окно для @fat</button><buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal"data-whatever="@getbootstrap">Открыть модальное окно для @getbootstrap</button><divclass="modal fade"id="exampleModal"tabindex="-1"aria-labelledby="exampleModalLabel"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title"id="exampleModalLabel">Новое сообщение</h5><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button></div><divclass="modal-body"><form><divclass="form-group"><labelfor="recipient-name"class="col-form-label">Получатель:</label><inputtype="text"class="form-control"id="recipient-name"></div><divclass="form-group"><labelfor="message-text"class="col-form-label">Сообщение:</label><textareaclass="form-control"id="message-text"></textarea></div></form></div><divclass="modal-footer"><buttontype="button"class="btn btn-secondary"data-dismiss="modal">Закрыть</button><buttontype="button"class="btn btn-primary">Отправить сообщение</button></div></div></div></div>$('#exampleModal').on('show.bs.modal',function(event){varbutton=$(event.relatedTarget)// Кнопка, запускающая модальное окно
varrecipient=button.data('whatever')// Извлечь информацию из атрибутов data- *
// При необходимости Вы можете инициировать здесь запрос AJAX (а затем выполнить обновление в обратном вызове).
// Обновите содержимое модального окна. Здесь мы будем использовать jQuery, но вместо этого Вы можете использовать библиотеку привязки данных или другие методы.
varmodal=$(this)modal.find('.modal-title').text('New message to '+recipient)modal.find('.modal-body input').val(recipient)})Изменение анимации
Переменная $modal-fade-transform определяет состояние преобразования .modal-dialog перед анимацией постепенного появления, переменная $modal-show-transform определяет преобразование .modal-dialog в конце модального появления анимация.
Если вы хотите, например, анимацию увеличения, вы можете установить $modal-fade-transform: scale(.8).
Анимация при удалении
Для модальных элементов, которые возникают простым способом, а не появляются плавно, удалите из кода модального элемента класс .fade.
<divclass="modal"tabindex="-1"aria-labelledby="..."aria-hidden="true"> ...
</div>Динамическая высота
Если высота модального элемента изменяется при его открытии, вам следует вызвать $('#myModal').modal('handleUpdate') для обновления позиции модального элемента в случае, если возникнет полоса прокрутки.
Доступность
Не забудьте добавить aria-labelledby="...", ссылаясь на заголовок модального окна, в .modal. Кроме того, Вы можете дать описание Вашего модального диалога с помощью aria-describedby в .modal. Обратите внимание, что Вам не нужно добавлять role="dialog", поскольку мы уже добавляем его через JavaScript.
Встраивание видео из YouTube
Встраивание видео в модальные элементы требует дополнительного JavaScript для запрета автоматического воспроизведения и т.д. Дополнительная информация здесь.
Дополнительные размеры
У модальных элементов есть два размера, доступных к изменению через классы-модификаторы, которые надо размещать в элементе .modal-dialog. Эти размеры включаются на определенных брейкпойнтах, чтобы избежать появления горизонтальных полос прокрутки на более узких зонах просмотра.
| Размер | Класс | Максимальная ширина модального окна |
|---|---|---|
| Маленькое | .modal-sm | 300px |
| По умолчанию | Никакой | 500px |
| Большое | .modal-lg | 800px |
| Очень большое | .modal-xl | 1140px |
Наш модальный класс по умолчанию без модификаторов представляет собой модальное окно «среднего» размера.
<divclass="modal-dialog modal-xl">...</div><divclass="modal-dialog modal-lg">...</div><divclass="modal-dialog modal-sm">...</div>Использование
Плагин модальных элементов переключает состояние вашего скрытого содержимого по требованию с помощью атрибутов или JavaScript. Он также добавляет в <body> класс .modal-open для преодоления поведения при прокрутке по умолчанию, и создает зону для клика вне модального элемента, нужную для закрытия открытых модальных элементов, класс .modal-backdrop.
Через атрибуты
Активируйте модальный элемент без JavaScript. Установите data-toggle="modal" в контролирующем элементе, таком как кнопка, наряду с data-target="#foo" или href="#foo", для обращения к функциональности “toggle” для частного модального элемента.
<buttontype="button"data-toggle="modal"data-target="#myModal">Запустить модальное окно</button>Через JavaScript
Вызов модального окна с идентификатором myModal с помощью одной строки на JavaScript:
$('#myModal').modal(options)Параметры
Параметры можно передавать атрибутами или JavaScript. Для использования атрибутов добавьте имя параметра в data-, например data-backdrop="".
| Название | Тип | По умолч. | Описание |
|---|---|---|---|
| backdrop | boolean or the string 'static' | true | Подключает модальный элемент с затемненным фоном. Еще – задает static для фона, который не закрывает модальный элемент по клику на фоне. |
| keyboard | boolean | true | Закрывает модальный элемент по нажатию ESC. |
| focus | boolean | true | Фокусируется на модальном элементе по инициализации. |
| show | boolean | true | Показывает модальный элемент по инициализации. |
Методы
Асинхронные методы и переходы
Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.
.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').modal('handleUpdate')
Вручную обновляет позицию модального элемента, если высота его изменяется во время открытия (т.е. в случае возникновения полосы прокрутки).
$('#myModal').modal('handleUpdate').modal('dispose')
Уничтожает модальный элемент.
События
Модальный элемент в 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-keyboard, установленным в значение false. |
$('#myModal').on('hidden.bs.modal',function(event){// сделайте что-нибудь...
})