В основном, модальное окно — это диалоговое или всплывающее окно, которое используется для предоставления важной информации пользователю или побуждения пользователя предпринять необходимые действия, прежде чем двигаться дальше. Модальные окна широко используются для предупреждения пользователей о таких ситуациях, как истечение времени сеанса или получение их окончательного подтверждения перед выполнением каких-либо критических действий, таких как сохранение или удаление важных данных. Мне довольно часто приходится использовать модальные окна для вывода различных форм, таких как например формы обратной связи.
Базовый код модального окна
Вы можете легко создавать очень умные и гибкие диалоговые окна с помощью модального плагина Bootstrap. В следующем примере представлена базовая структура для создания простого модального окна с заголовком, телом сообщения и нижним колонтитулом, содержащим кнопки действий для пользователя.
<div id="myModal" class="modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Подтверждение</h5> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <p>Вы хотите сохранить изменения в этом документе перед закрытием?</p> <p class="text-secondary"><small>Если вы не сохраните, ваши изменения будут потеряны.</small></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button> <button type="button" class="btn btn-primary">Сохранить изменения</button> </div> </div> </div></div>
Для того, чтобы код сработал, конечно же, вы должны подключить bootstrap.min.css в внутри тегов <head></head>, например так:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
И перед закрывающим тегом </body> подключить библиотеку jQuery, bootstrap.min.js, popper.min.js и скрипт, инициализирующий запуск модального окна:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><script> $(document).ready(function(){ $("#myModal").modal('show'); });</script>
Функция modal() запускает модальное окно с указанным ID, в данном случае myModal.
Если вы запустите приведенный выше пример, он автоматически создаст модальное окно, когда DOM будет полностью загружен через JavaScript. Результат будет выглядеть примерно так:
Совет: всегда старайтесь размещать HTML-код модального окна в позиции верхнего уровня в вашем документе, предпочтительно сразу после открывающего тега <body>, чтобы избежать помех от других элементов, в противном случае это может повлиять на внешний вид или функциональность модального окна.
Активируйте модальные окна с помощью data-* атрибутов
Вы можете активировать модальное окно Bootstrap, нажав на кнопку или ссылку через data-* атрибуты без написания кода JavaScript.
Объяснение кода
Для активации модального окна Bootstrap через data-* атрибуты нам в основном нужны два компонента — элемент контроллера, такой как кнопка или ссылка, и сам модальный элемент.
Внешний контейнер каждого модального элемента в документе должен иметь уникальный идентификатор (в данном случае id="myModal"), чтобы на него можно было ориентироваться через data-target (для кнопок) или href (для гиперссылок) атрибут элемента контроллера.
Атрибут data-toggle=»modal» требуется добавить в элемент контроллера, например кнопку или привязку, вместе с атрибутом data-target="#myModal" или href="#myModal", чтобы обозначить элемент как контроллер всплывающих окон.
Класс .modal-dialog устанавливает ширину, а также горизонтальное и вертикальное выравнивание модального окна. В то время как класс .modal-content устанавливает стили, такие как цвет текста и фона, границы, закругленные углы и т. д.
Все остальное, я думаю, не требует пояснений, например, элемент .modal-header определяет заголовок для модального окна, который обычно содержит заголовок и кнопку закрытия, тогда как элемент .modal-body содержит фактический контент, такой как текст, изображения, формы и т.д., а элемент .modal-footer определяет нижний колонтитул, который обычно содержит кнопки действий для пользователя.
Класс .fade в элементе .modal добавляет эффект анимации исчезновения и скольжения при отображении и скрытии модального окна. Если вы хотите, чтобы окно просто появлялось без какого-либо эффекта, вы можете просто удалить этот класс. Кроме того, когда модальные окна становятся слишком большими для просмотра, они прокручиваются независимо от самой страницы.
Активируйте модальные окна через JavaScript
Вы также можете активировать модальное окно Bootstrap через JavaScript — просто вызовите метод modal() с идентификатором окна или его селектором класса в вашем коде JavaScript.
<script>$(document).ready(function(){ $(".btn").click(function(){ $("#myModal").modal("show"); });});</script>
Изменяйте размеры модальных окон
Bootstrap дает вам возможность масштабировать модальные окна. Вы можете создавать малые, большие и очень большие окна, добавив дополнительный класс .modal-sm, .modal-lg или .modal-xl соответственно в элемент с классом.modal-dialog.
Совет: максимальная ширина модального окна по умолчанию будет 500px, тогда как максимальная ширина малого, большого и очень большого будет 300px, 800px и 1140px, соответственно.
Изменяйте содержимое модального окна на основе триггерной кнопки
Часто несколько модальных окон на веб-страницах имеют почти одинаковый контент с небольшими отличиями. Вы можете использовать модальные события для создания разных модальных окон на основе одного и того же модального HTML. В следующем примере показано, как изменить заголовок модального окна в соответствии со значением атрибута data-title кнопки триггера.
Центрируйте окна вертикально
Просто добавьте класс .modal-dialog-centered к элементу с классом .modal-dialog, чтобы вертикально отцентрировать окно. Если у модального окна длинный контент, вы можете дополнительно применить класс .modal-dialog-scrollable к .modal-dialog, чтобы сделать контентную часть прокручиваемой.
Используйте сетку Bootstrap внутри модальных окон
Вы также можете использовать сетку Bootstrap в модальных окнах. Просто используйте класс .row для создания строк и классы .col- *, .col-sm- *, .col-md- *, .col-lg- * и .col-xl- * для создания столбцов внутри элемента с классом .modal.
Загружайте контент в модальные окна через Ajax
Вы также можете загрузить удаленный контент в модальном окне Bootstrap через Ajax.
Вы также можете размещать всплывающие подсказки внутри модальных окон при необходимости. Когда модальные окна закрыты, любые всплывающие подсказки автоматически отключаются.
Параметры
Существуют определенные параметры, которые можно передать методу modal() для настройки функциональности модального режима. Опции могут быть переданы через data-* атрибуты или JavaScript.
Для настройки модальных опций с помощью data-* атрибутов просто добавьте имя опции к data-, например data-background="static", data-keyboard="false" и т. д.
Методы
Это стандартные методы загрузки модальных окон:
.modal(options)
Этот метод активирует контент как модальный. Это также позволяет вам устанавливать параметры для модальных окон.
.modal(‘show’)
Этот метод может быть использован для открытия модального окна вручную.
.modal(‘hide’)
Этот метод можно использовать, чтобы скрыть модальное окно вручную.
.modal(‘toggle’)
Этот метод можно использовать для переключения отображения модального окна вручную.
.modal(‘handleUpdate’)
Этот метод перенастраивает положение модального слоя, чтобы противостоять рывку, возникающему из-за появления полосы прокрутки в области просмотра, в случае, если высота модального окна изменяется таким образом, что она становится выше, чем высота области просмотра, когда она открыта.
Типичным примером этого сценария является показ скрытых элементов внутри модального окна с помощью JavaScript или загрузка содержимого внутри модального окна с помощью Ajax после активации.
События
Класс Bootstrap .modal включает несколько событий для подключения к модальной функциональности.
СобытиеОписаниеshow.bs.modalСобытие происходит, когда вызывается метод show(), предназначенный для открытия модального окна.shown.bs.modalСобытие происходит, когда модальное окно становится видимым для пользователя, т.е. когда оно будет полностью отрисовано с помощью стилей CSS.hide.bs.modalСобытие происходит, когда вызывается метод hide(), который предназначен для скрытия модального окна.hidden.bs.modalСобытие происходит, когда модальное окно становится полностью невидимым для пользователя, т.е. когда будут отработаны полностью все CSS-свойства, выполняющие этот процесс.
В следующем примере отображается сообщение с предупреждением, когда модальное окно станет полностью невидимым для пользователя.
<script>$(document).ready(function(){ $("#myModal").on('hidden.bs.modal', function(){ alert("Модальное окно было полностью закрыто."); });});</script>
Заключение
Как видите модальные окна в Boostrap имеют гибкую функциональность и множество настроек, а использовать их совсем не сложно. Надеюсь эта статья поможет вам разобраться в применении всплывающих окон Bootstrap на своем сайте, и использовать их функциональность в полной мере. Удачи!
