Bootstrap 4 Modal - модальное окно
Загрузочный 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
класса для больших модальностей.
Добавьте класс Size к элементу <div>
с классом .modal-dialog
:
Small Modal
<div class="modal-dialog modal-sm">
Большие модальные
<div class="modal-dialog modal-lg">
По умолчанию модальные размеры являются средними.
Центрированный модальный
Центрировать модальные вертикально и горизонтально в пределах страницы, с .modal-dialog-centered
классом:
Пример
<div class="modal-dialog modal-dialog-centered">
Bootstrap Модальный справочник
Для полной ссылки на все модальные варианты, методы и события, перейдите на наш Bootstrap JS Модальный справочник.