Изменяйте содержимое модального окна на основе триггерной кнопки
Часто несколько модальных окон на веб-страницах имеют почти одинаковый контент с небольшими отличиями. Вы можете использовать модальные события для создания разных модальных окон на основе одного и того же модального HTML. В следующем примере показано, как изменить заголовок модального окна в соответствии со значением атрибута data-title кнопки триггера.
.modal(‘handleupdate’)
Этот метод перенастраивает положение модального слоя, чтобы противостоять рывку, возникающему из-за появления полосы прокрутки в области просмотра, в случае, если высота модального окна изменяется таким образом, что она становится выше, чем высота области просмотра, когда она открыта.
Типичным примером этого сценария является показ скрытых элементов внутри модального окна с помощью JavaScript или загрузка содержимого внутри модального окна с помощью Ajax после активации.
.modal(‘hide’)
Этот метод можно использовать, чтобы скрыть модальное окно вручную.
.modal(‘show’)
Этот метод может быть использован для открытия модального окна вручную.
.modal(‘handleupdate’)
Вручную обновляет позицию модального элемента, если высота его изменяется во время открытия (т.е. в случае возникновения полосы прокрутки).
.modal(‘hide’)
Вручную прячет модальный элемент. Возвращается к функции-вызову до того, как модальный элемент показан. (т.е. до того, как произойдет событие hidden.bs.modal).
.modal(options)
Этот метод активирует контент как модальный. Это также позволяет вам устанавливать параметры для модальных окон.
Код jQuery в следующем примере будет препятствовать закрытию модального окна, когда пользователь нажимает на фон, то есть на черную область наложения позади модального окна.
Следующий код jQuery предотвратит закрытие модального окна при нажатии клавиши ESC.
.modal(‘show’)
Вручную открывает модальный элемент. Возвращается к функции-вызову до того, как модальный элемент показан. (т.е. до того, как произойдет событие shown.bs.modal).
.modal(‘toggle’)
Вручную изменяет состояние модального элемента. Возвращается к функции-вызову до того, как модальный элемент показан или скрыт. (т.е. до того, как произойдет событие shown.bs.modal или hidden.bs.modal).
«живое» демо
Изменяйте (скрывайтепоказывайте) рабочий пример модального элемента по клику на кнопку ниже. Окно сползет вниз и возникнет в верху страницы.
Dispose
Уничтожает элемент модальное окно. (Удаляет сохраненные данные в элементе DOM)
Getorcreateinstance
Статический метод, который позволяет вам получить модальный экземпляр, связанный с элементом DOM, или создать новый, если он не был инициализирован.
Modal form
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product – Material Design for
Bootstrap 5.Go to docs v.5
Modal with avatar
The login modal can be combined with the avatar component.
Passing options
Активирует Ваш контент как модальное окно. Принимает необязательные параметры object.
Subscription modal with an orange header
Use a subscription modal with a clear header.
Активируйте модальные окна с помощью data-* атрибутов
Вы можете активировать модальное окно Bootstrap, нажав на кнопку или ссылку через data-* атрибуты без написания кода JavaScript. Посмотрите на следующий пример, чтобы увидеть, как это работает:
Активируйте модальные окна через javascript
Вы также можете активировать модальное окно Bootstrap через JavaScript — просто вызовите метод modal() с идентификатором окна или его селектором класса в вашем коде JavaScript.
Анимация при удалении
Для модальных элементов, которые возникают простым способом, а не появляются плавно, удалите из кода модального элемента класс .fade.
Базовый код модального окна
Вы можете легко создавать очень умные и гибкие диалоговые окна с помощью модального плагина Bootstrap. В следующем примере представлена базовая структура для создания простого модального окна с заголовком, телом сообщения и нижним колонтитулом, содержащим кнопки действий для пользователя.
Вертикально по центру
Добавить, .modal-dialog-centered, чтобы .modal-dialog центрировать модальное окно по вертикали.
Vertically centered modal
Vertically centered scrollable modal
Всплывающие подсказки и всплывающие окна могут быть размещены в модальных окнах по мере необходимости. Когда модальные окна закрываются, любые всплывающие подсказки и всплывающие окна также автоматически закрываются.
Динамическая высота
Если высота модального элемента изменяется при его открытии, вам следует вызвать $(‘#myModal’).modal(‘handleUpdate’) для обновления позиции модального элемента в случае, если возникнет полоса прокрутки.
Дополнительные размеры
У модальных элементов есть два размера, доступных к изменению через классы-модификаторы, которые надо размещать в элементе .modal-dialog. Эти размеры включаются на определенных брейкпойнтах, чтобы избежать появления горизонтальных полос прокрутки на более узких зонах просмотра.
Модаль по умолчанию без класса модификаторов составляет среднего “medium” размера.
Доступность
Удостоверьтесь, что добавили в .modalrole=”dialog” и aria-labelledby=”…”, привязанные к названию модального элемента, и role=”document” в .modal-dialog.
Загружайте контент в модальные окна через ajax
Вы также можете загрузить удаленный контент в модальном окне Bootstrap через Ajax.
Нужна система управления производством? Система управление производством автоматизирует процессы подготовки производства. Автоматизация управления производством затрагивает планирование и контроль хода производства промышленного предприятия.
В следующем примере содержимое внутри модального окна будет вставлено из удаленного файла после активации с использованием метода jQuery load() и события Bootstrap show.bs.modal.
Изменение анимации
Переменная $modal-fade-transform определяет состояние преобразования .modal-dialog перед анимацией постепенного появления, переменная $modal-show-transform определяет преобразование .modal-dialog в конце модального появления анимация.
Если вы хотите, например, анимацию увеличения, вы можете установить $modal-fade-transform: scale(.8).
Использование сетки
Используйте систему сеток Bootstrap внутри модального элемента, расположив .container-fluid внутри .modal-body. После этого используйте обычную систему сеток обычным образом.
Используйте сетку bootstrap внутри модальных окон
Вы также можете использовать сетку Bootstrap в модальных окнах. Просто используйте класс .row для создания строк и классы .col- *, .col-sm- *, .col-md- *, .col-lg- * и .col-xl- * для создания столбцов внутри элемента с классом .modal. Давайте посмотрим на пример:
Как это устроено
Прежде чем приступить к работе с модальным компонентом Bootstrap, обязательно прочтите следующее, поскольку параметры нашего меню недавно изменились.
- Модальные окна создаются с помощью HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и убирают прокрутку,
<body>
, чтобы вместо этого прокручивалось модальное содержимое. - Щелчок по модальному «фону» автоматически закроет модальное окно.
- Bootstrap поддерживает только одно модальное окно за раз. Вложенные модальные окна не поддерживаются, так как мы считаем, что они неудобны для пользователей.
- Использование модальных окон
position: fixed
, которые иногда могут быть немного специфичными в отношении рендеринга. По возможности размещайте модальный HTML-код на верхнем уровне, чтобы избежать потенциального вмешательства со стороны других элементов. Скорее всего, вы столкнетесь с проблемами при вложении.modal
в другой фиксированный элемент. - Еще раз, из-за того
position: fixed
, что есть некоторые предостережения при использовании модальных окон на мобильных устройствах. См. дополнительную информацию в документации по поддержке браузера . - Благодаря тому , как HTML5 определяет его семантику, атрибут HTML не имеет никакого эффекта в Bootstrap модальностей. Чтобы добиться того же эффекта, используйте собственный JavaScript:
autofocus
Продолжайте читать, чтобы увидеть демонстрации и инструкции по использованию.
Комбинируйте содержимое модальных элементов
Есть много кнопок, которые все запускают один модальный элемент со слегка разным содержимым? Используйте event.relatedTarget и атрибуты data-* (возможно через jQuery) для изменения содержимого в зависимости от нажатой кнопки.
Ниже – пример демо с кодом HTML и JavaScript. Для информации по relatedTarget читайте инфо по событиям модальных элементов.
Методы
Это стандартные методы загрузки модальных окон:
Модальные компоненты
Ниже – пример статичного модального компонента (это значит, что его position и display «преодолены»). В примере есть заголовок модального компонента, тело (требуется для padding), футер модального компонента (по желанию).
Объяснение кода
Для активации модального окна Bootstrap через data-* атрибуты нам в основном нужны два компонента — элемент контроллера, такой как кнопка или ссылка, и сам модальный элемент.
Внешний контейнер каждого модального элемента в документе должен иметь уникальный идентификатор (в данном случае id=”myModal”), чтобы на него можно было ориентироваться через data-target (для кнопок) или href (для гиперссылок) атрибут элемента контроллера.
Отклонение
Отклонение может быть достигнуто с помощью атрибута data на кнопке внутри modal, как показано ниже:
или на кнопке за пределами modal с помощью data-bs-target, как показано ниже:
Параметры
Существуют определенные параметры, которые можно передать методу modal() для настройки функциональности модального режима. Опции могут быть переданы через data-* атрибуты или JavaScript.
Для настройки модальных опций с помощью data-* атрибутов просто добавьте имя опции к data-, например data-background=”static”, data-keyboard=”false” и т. д.
Data-* атрибуты обеспечивают простой способ установки параметров модальных окон, однако JavaScript является наиболее предпочтительным способом, поскольку он предотвращает повторный вызов функций.
В следующем примере мы установили для параметра background фон static, что предотвращает закрытие модального окна при щелчке за пределами модального объекта, то есть черной области наложения.
Полноэкранная модаль
Для охвата всей области просмотра возможно переопределение отображения модального окна через классы модификаторов, размещенных в диалоговом окне .modal-dialog.
Класс | Доступность |
---|---|
.modal-fullscreen | Всегода |
.modal-fullscreen-sm-down | Below 576px |
.modal-fullscreen-md-down | Below 768px |
.modal-fullscreen-lg-down | Below 992px |
.modal-fullscreen-xl-down | Below 1200px |
.modal-fullscreen-xxl-down | Below 1400px |
Полноэкранное модальное окно
Другим переопределением является возможность отображения модального окна, охватывающего область просмотра пользователя, доступного через классы модификаторов, размещенные в файле .modal-dialog.
Учебный класс | Доступность |
---|---|
.modal-fullscreen | Всегда |
.modal-fullscreen-sm-down | Ниже 576px |
.modal-fullscreen-md-down | Ниже 768px |
.modal-fullscreen-lg-down | Ниже 992px |
.modal-fullscreen-xl-down | Ниже 1200px |
Применение
Модальный плагин переключает Ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript. Он также добавляет .modal-open к <body> , чтобы переопределить поведение прокрутки по умолчанию, и генерирует .modal-backdrop, чтобы предоставить область клика для отклонения отображаемых модальных окон при клике вне модального окна.
Прокрутка длинного контента
Когда модальные окна становятся слишком длинными для области просмотра или устройства пользователя, они прокручиваются независимо от самой страницы. Попробуйте демонстрацию ниже, чтобы понять, что мы имеем в виду.
Запустить демонстрацию модального окна
Вы также можете создать модальное окно с возможностью прокрутки, которое позволяет прокручивать тело модального окна, добавив .modal-dialog-scrollable к .modal-dialog.
Запустить демонстрацию модального окна
Статический фон
Когда фон установлен на статический, модаль не будет закрываться при нажатии за его пределами. Нажмите кнопку ниже, чтобы попробовать.
Запустить статический фон модального окна
Через javascript
Вызовите модальный элемент с id=”myModal” одной строкой JavaScript:
Заключение
Как видите модальные окна в Boostrap имеют гибкую функциональность и множество настроек, а использовать их совсем не сложно. Надеюсь эта статья поможет вам разобраться в применении всплывающих окон Bootstrap на своем сайте, и использовать их функциональность в полной мере. Удачи!