Bootstrap позволяет добавить модальное диалоговое окно на ваш сайт. Модальное — это диалоговое окно, которое получает фокус, в то время как остальная часть экрана затемняется. Это заставляет пользователя принять какие-то действия в диалоговом окне, прежде чем продолжить работать дальше.
Чтобы создать модальное окно, используйте класс .modal совместно с другими классами .modal-*, которые определяют каждый раздел модального окна.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#flipFlop">
Нажми на меня
</button>
<!-- Модальное окно -->
<div class="modal fade" id="flipFlop" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modalLabel">Сандалия</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Тип обуви с открытыми носками.</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Размер модального окна
Модальные окна по умолчанию имеют средний размер. Вы можете указать маленький или большой размер при необходимости.
Маленькое окно
Для маленького модального диалогового окна, добавьте класс .modal-sm к .modal-dialog.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#smallShoes">
Нажми на меня
</button>
<!-- Модальное окно -->
<div class="modal fade" id="smallShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modalLabelSmall">Маленькие туфли</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Маленькие туфли обычно носят люди с маленькими ногами.</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Большое окно
Для большого модального диалогового окна добавьте класс .modal-lg к .modal-dialog.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#largeShoes">
Нажми на меня
</button>
<!-- Модальное окно -->
<div class="modal fade" id="largeShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modalLabelLarge">Большие туфли</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Люди с маленькими ногами обычно избегают больших туфель.</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Убрать эффект затухания
Вы можете удалить класс .fade, чтобы избавиться от эффекта затухания при открытии и закрытии окна.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#largeShoes">
Нажми на меня
</button>
<!-- Модальное окно -->
<div class="modal" id="largeShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modalLabelLarge">Чистка обуви</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Уберите эффект затухания отполировав свою обувь!</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>