Модальное диалоговое окно

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">&times;</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">&times;</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">&times;</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">&times;</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>

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты