Модальное окно Bootstrap: использование и настройка
20 апреля 2020 JavaScript Bootstrap
В основном, модальное окно — это диалоговое или всплывающее окно, которое используется для предоставления важной информации пользователю или побуждения пользователя предпринять необходимые действия, прежде чем двигаться дальше. Модальные окна широко используются для предупреждения пользователей о таких ситуациях, как истечение времени сеанса или получение их окончательного подтверждения перед выполнением каких-либо критических действий, таких как сохранение или удаление важных данных. Мне довольно часто приходится использовать модальные окна для вывода различных форм, таких как например формы обратной связи.
Содержание
- 1 Базовый код модального окна
- 2 Активируйте модальные окна с помощью data-* атрибутов
- 3 Объяснение кода
- 4 Активируйте модальные окна через JavaScript
- 5 Изменяйте размеры модальных окон
- 6 Изменяйте содержимое модального окна на основе триггерной кнопки
- 7 Центрируйте окна вертикально
- 8 Используйте сетку Bootstrap внутри модальных окон
- 9 Загружайте контент в модальные окна через Ajax
- 10 Параметры
- 11 Методы
- 12 .modal(options)
- 13 .modal(‘show’)
- 14 .modal(‘hide’)
- 15 .modal(‘toggle’)
- 16 .modal(‘handleUpdate’)
- 17 События
- 18 Заключение
Базовый код модального окна
Вы можете легко создавать очень умные и гибкие диалоговые окна с помощью модального плагина 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>
, чтобы избежать помех от других элементов, в противном случае это может повлиять на внешний вид или функциональность модального окна.
File-Info — https://www.file-info.ru поможет открыть неизвестное расширение.
Активируйте модальные окна с помощью data-* атрибутов
Вы можете активировать модальное окно Bootstrap, нажав на кнопку или ссылку через data-* атрибуты без написания кода JavaScript. Посмотрите на следующий пример, чтобы увидеть, как это работает:
<!-- HTML-код кнопки (триггер модального окна)--> <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Запустить модальное окно</a> <!-- HTML-код модального окна --> <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 через 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
. Пример:
<!-- Очень большое окно --> <button class="btn btn-primary" data-toggle="modal" data-target="#extraLargeModal">Очень большое окно</button> <div id="extraLargeModal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Очень большое окно</h5> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <p>Добавьте класс <code>.modal-xl</code> совместно с <code>.modal-dialog</code> для создания очень большого окна.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button> <button type="button" class="btn btn-primary">OK</button> </div> </div> </div> </div> <!-- Большое окно --> <button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Большое окно</button> <div id="largeModal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Большое окно</h5> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <p>Добавьте класс <code>.modal-lg</code> совместно с <code>.modal-dialog</code> для создания большого окна.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button> <button type="button" class="btn btn-primary">OK</button> </div> </div> </div> </div> <!-- Малое окно --> <button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Малое окно</button> <div id="smallModal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Малое окно</h5> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <p>Добавьте класс <code>.modal-sm</code> совместно с <code>.modal-dialog</code> для создания малого окна.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button> <button type="button" class="btn btn-primary">OK</button> </div> </div> </div> </div>
Совет: максимальная ширина модального окна по умолчанию будет 500px, тогда как максимальная ширина малого, большого и очень большого будет 300px, 800px и 1140px, соответственно.
Изменяйте содержимое модального окна на основе триггерной кнопки
Часто несколько модальных окон на веб-страницах имеют почти одинаковый контент с небольшими отличиями. Вы можете использовать модальные события для создания разных модальных окон на основе одного и того же модального HTML. В следующем примере показано, как изменить заголовок модального окна в соответствии со значением атрибута data-title
кнопки триггера.
<script> $(document).ready(function(){ $("#myModal").on("show.bs.modal", function(event){ // Получить кнопку, которая запустила окно var button = $(event.relatedTarget); // Извлечь значение из атрибута пользовательских данных- * var titleData = button.data("title"); $(this).find(".modal-title").text(titleData); }); }); </script>
Центрируйте окна вертикально
Просто добавьте класс .modal-dialog-centered
к элементу с классом .modal-dialog
, чтобы вертикально отцентрировать окно. Если у модального окна длинный контент, вы можете дополнительно применить класс .modal-dialog-scrollable
к .modal-dialog
, чтобы сделать контентную часть прокручиваемой. Пример:
<!-- HTML-код кнопки (триггер модального окна) --> <a href="#modalCenter" role="button" class="btn btn-primary" data-toggle="modal">Вертикально-отцентрированное окно</a> <!-- HTML-код модального окна --> <div id="modalCenter" class="modal fade" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <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> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button> <button type="button" class="btn btn-primary">OK</button> </div> </div> </div> </div>
Используйте сетку Bootstrap внутри модальных окон
Вы также можете использовать сетку Bootstrap в модальных окнах. Просто используйте класс .row
для создания строк и классы .col- *
, .col-sm- *
, .col-md- *
, .col-lg- *
и .col-xl- *
для создания столбцов внутри элемента с классом .modal
. Давайте посмотрим на пример:
<div id="myModal" class="modal fade" 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"> <div class="row"> <div class="col-6"> <div class="form-group"> <label>Имя</label> <input type="text" class="form-control"> </div> </div> <div class="col-6"> <div class="form-group"> <label>Фамилия</label> <input type="text" class="form-control"> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="form-group"> <label>Email</label> <input type="email" class="form-control"> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="form-group"> <label>Комментарий</label> <textarea class="form-control"></textarea> </div> </div> </div> </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>
Загружайте контент в модальные окна через Ajax
Вы также можете загрузить удаленный контент в модальном окне Bootstrap через Ajax.
Нужна система управления производством? Система управление производством автоматизирует процессы подготовки производства. Автоматизация управления производством затрагивает планирование и контроль хода производства промышленного предприятия.
В следующем примере содержимое внутри модального окна будет вставлено из удаленного файла после активации с использованием метода jQuery load()
и события Bootstrap show.bs.modal
.
<!-- jQuery-код (для загрузки контента через Ajax) --> <script> $(document).ready(function(){ $("#myModal").on("show.bs.modal", function(event){ // Поместите возвращенный HTML в выбранный элемент $(this).find(".modal-body").load("remote.php"); }); }); </script> <!-- HTML-код кнопки (триггер модального окна) --> <button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Показать модальное окно</button> <!-- HTML-код модального окна --> <div id="myModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Модальное окно с Ajax</h5> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <!-- Контент загруженный из файла "remote.php" --> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button> <button type="button" class="btn btn-primary">OK</button> </div> </div> </div> </div>
Вы также можете размещать всплывающие подсказки внутри модальных окон при необходимости. Когда модальные окна закрыты, любые всплывающие подсказки автоматически отключаются.
Параметры
Существуют определенные параметры, которые можно передать методу modal()
для настройки функциональности модального режима. Опции могут быть переданы через data-* атрибуты или JavaScript.
Для настройки модальных опций с помощью data-* атрибутов просто добавьте имя опции к data
-, например data-background="static"
, data-keyboard="false"
и т. д.
Имя | Тип | Значение по умолчанию | Описание |
---|---|---|---|
backdrop | boolean или string static | true | Включает элемент модального фона (черная область наложения). В качестве альтернативы, вы можете указать static фон, который не закрывает модальное окно при щелчке. |
keyboard | boolean | true | Закрывает модальное окно при нажатии клавиши ESC. |
focus | boolean | true | Устанавливает focus на модальном окне при инициализации. |
show | boolean | true | Показывает модальное окно при инициализации или активации. |
Data-* атрибуты обеспечивают простой способ установки параметров модальных окон, однако JavaScript является наиболее предпочтительным способом, поскольку он предотвращает повторный вызов функций.
В следующем примере мы установили для параметра background
фон static
, что предотвращает закрытие модального окна при щелчке за пределами модального объекта, то есть черной области наложения.
<!-- HTML-код кнопки (триггер модального окна) --> <button type="button" class="btn btn-lg btn-primary" data-target="#myModal" data-toggle="modal">Показать модальное окно</button> <!-- HTML-код модального окна --> <div id="myModal" class="modal fade" data-backdrop="static" 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>
Методы
Это стандартные методы загрузки модальных окон:
.modal(options)
Этот метод активирует контент как модальный. Это также позволяет вам устанавливать параметры для модальных окон.
Код jQuery в следующем примере будет препятствовать закрытию модального окна, когда пользователь нажимает на фон, то есть на черную область наложения позади модального окна.
<script> $(document).ready(function(){ $(".launch-modal").click(function(){ $("#myModal").modal({ backdrop: 'static' }); }); }); </script>
Следующий код jQuery предотвратит закрытие модального окна при нажатии клавиши ESC.
<script> $(document).ready(function(){ $(".launch-modal").click(function(){ $("#myModal").modal({ keyboard: false }); }); }); </script>
.modal(‘show’)
Этот метод может быть использован для открытия модального окна вручную.
<script> $(document).ready(function(){ $(".show-modal").click(function(){ $("#myModal").modal('show'); }); }); </script>
.modal(‘hide’)
Этот метод можно использовать, чтобы скрыть модальное окно вручную.
<script> $(document).ready(function(){ $(".hide-modal").click(function(){ $("#myModal").modal('hide'); }); }); </script>
.modal(‘toggle’)
Этот метод можно использовать для переключения отображения модального окна вручную.
<script> $(document).ready(function(){ $(".toggle-modal").click(function(){ $("#myModal").modal('toggle'); }); }); </script>
.modal(‘handleUpdate’)
Этот метод перенастраивает положение модального слоя, чтобы противостоять рывку, возникающему из-за появления полосы прокрутки в области просмотра, в случае, если высота модального окна изменяется таким образом, что она становится выше, чем высота области просмотра, когда она открыта.
Типичным примером этого сценария является показ скрытых элементов внутри модального окна с помощью JavaScript или загрузка содержимого внутри модального окна с помощью Ajax после активации.
<script> $(document).ready(function(){ $(".show-text").click(function(){ $('#myModal').find(".lots-of-text").toggle(); $('#myModal').modal('handleUpdate') }); }); </script>
События
Класс 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 на своем сайте, и использовать их функциональность в полной мере. Удачи!
Привет
Здравствуйте.
Надо сделать два модальных окна, чтобы при открытии одного второе закрывалось.
Как это реализовать?
Здравствуйте!
При открытии окна вызывать метод hide() или modal(‘toggle’) для другого.