Bootstrap 4 Модальный
Bootstrap 4 Модальный
Модальный компонент — это диалоговое/всплывающее окно, которое отображается поверх текущей страницы:
Как создать модальное окно
В следующем примере показано, как создать базовое модальное окно:
Пример
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal
Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal
body..
</div>
<!-- Modal footer -->
<div
class="modal-footer">
<button
type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Добавить анимацию
Используйте .fadeкласс, чтобы добавить эффект затухания при открытии и закрытии модального окна:
Пример
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
Модальный размер
Измените размер модального окна, добавив .modal-sm
класс для маленьких модальных окон, .modal-lgкласс для больших модальных окон или .modal-xlдля очень больших модальных окон.
Добавьте класс размера к <div>элементу с классом .modal-dialog:
Маленький модальный
<div class="modal-dialog modal-sm">
Большой модальный
<div class="modal-dialog modal-lg">
Очень большой модальный
<div class="modal-dialog modal-xl">
По умолчанию модальные окна имеют «средний» размер.
Модальный по центру
Центрируйте модальное окно по вертикали и горизонтали на странице с помощью .modal-dialog-centered
класса:
Пример
<div class="modal-dialog modal-dialog-centered">
Модальный режим прокрутки
Когда у вас много контента внутри модального окна, на страницу добавляется полоса прокрутки. Посмотрите примеры ниже, чтобы понять это:
Пример
<div class="modal-dialog">
Однако можно прокручивать только внутри модального окна, а не на самой странице, добавив .modal-dialog-scrollableв .modal-dialog:
Пример
<div class="modal-dialog modal-dialog-scrollable">
Полная модальная ссылка Bootstrap
Для получения полного справочника по всем модальным параметрам, методам и событиям перейдите в наш модальный справочник Bootstrap JS .