Используйте модальный плагин Bootstrap JavaScript, чтобы добавить на свой сайт диалоги для лайтбоксов, пользовательских уведомлений или полностью настраиваемого контента.
Как это работает
Прежде чем приступить к работе с модальным компонентом Bootstrap, обязательно прочитайте следующее, так как параметры нашего меню недавно изменились.
Модальные окна создаются с помощью HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и удаляют прокрутку, <body>чтобы вместо этого прокручивалось модальное содержимое.
Щелчок по модальному «фону» автоматически закроет модальное окно.
Bootstrap поддерживает одновременно только одно модальное окно. Вложенные модальные окна не поддерживаются, так как мы считаем их неудобными для пользователя.
Модальные окна используют position: fixed, что иногда может быть немного специфичным в отношении его рендеринга. По возможности размещайте свой модальный HTML на верхнем уровне, чтобы избежать возможных помех от других элементов. Скорее всего, вы столкнетесь с проблемами при вложении a .modalв другой фиксированный элемент.
Из-за того, как HTML5 определяет свою семантику, атрибут autofocusHTML не влияет на модальные окна Bootstrap. Чтобы добиться того же эффекта, используйте собственный JavaScript:
Продолжайте читать для демонстраций и руководств по использованию.
Примеры
Модальные компоненты
Ниже приведен пример статического модального окна (имеется в виду, что его positionи displayбыли переопределены). Включены модальный заголовок, модальное тело (обязательно для padding) и модальный нижний колонтитул (необязательно). Мы просим вас включать модальные заголовки с действиями закрытия, когда это возможно, или предоставлять другое явное действие закрытия.
Модальное название
Здесь находится модальный основной текст.
Живая демонстрация
Переключите работающую модальную демонстрацию, нажав кнопку ниже. Он будет скользить вниз и исчезать в верхней части страницы.
Modal title
Woohoo, you're reading this text in a modal!
Прокрутка длинного контента
Когда модальные окна становятся слишком длинными для области просмотра или устройства пользователя, они прокручиваются независимо от самой страницы. Попробуйте демо ниже, чтобы увидеть, что мы имеем в виду.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Вертикально по центру
Добавьте .modal-dialog-centered, чтобы .modal-dialogцентрировать модальное окно по вертикали.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Подсказки и всплывающие окна
Подсказки и всплывающие окна могут быть размещены в модальных окнах по мере необходимости. Когда модальные окна закрыты, любые всплывающие подсказки и всплывающие окна также автоматически закрываются.
Используйте сетку Bootstrap в модальном окне, вложив ее в .container-fluidфайл .modal-body. Затем используйте обычные классы системы сетки, как и везде.
Grids in modals
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
.col-md-6 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Различное модальное содержимое
У вас есть куча кнопок, которые запускают одно и то же модальное окно с немного разным содержимым? Используйте атрибутыevent.relatedTarget и HTMLdata-* (возможно, через jQuery ), чтобы изменять содержимое модального окна в зависимости от того, какая кнопка была нажата.
Ниже приведена живая демонстрация, за которой следуют примеры HTML и JavaScript. Для получения дополнительной информации ознакомьтесь с документацией по модальным событиям для получения подробной информации о relatedTarget.
New message
Удалить анимацию
Для модальных окон, которые просто появляются, а не исчезают при просмотре, удалите .fadeкласс из модальной разметки.
Динамические высоты
Если высота модального окна изменяется, когда оно открыто, вы должны позвонить $('#myModal').modal('handleUpdate'), чтобы изменить положение модального окна в случае появления полосы прокрутки.
Доступность
Обязательно добавьте role="dialog"и aria-labelledby="...", ссылаясь на модальное название, на .modalи role="document"на .modal-dialogсебя. Кроме того, вы можете дать описание своего модального диалога с помощью aria-describedbyon .modal.
Встраивание видео с YouTube
Для встраивания видео с YouTube в модальные окна требуется дополнительный JavaScript, не входящий в Bootstrap, для автоматической остановки воспроизведения и т. д. См. этот полезный пост о переполнении стека для получения дополнительной информации.
Дополнительные размеры
Модальные окна имеют два дополнительных размера, доступных через классы модификаторов для размещения в файле .modal-dialog. Эти размеры срабатывают в определенных точках останова, чтобы избежать горизонтальных полос прокрутки на более узких окнах просмотра.
Large modal
...
Small modal
...
Применение
Модальный плагин переключает ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript. Он также добавляет .modal-openк <body>переопределению поведения прокрутки по умолчанию и создает .modal-backdropобласть щелчка для закрытия отображаемых модальных окон при нажатии вне модального окна.
Через атрибуты данных
Активируйте модальное окно без написания JavaScript. Установите data-toggle="modal"элемент контроллера, например кнопку, вместе с data-target="#foo"или href="#foo", чтобы настроить конкретное модальное окно для переключения.
Через JavaScript
Вызов модального окна с идентификатором myModalс помощью одной строки JavaScript:
Опции
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-, как в data-backdrop="".
Имя
Тип
По умолчанию
Описание
фон
логическое значение или строка'static'
истинный
Включает элемент модального фона. В качестве альтернативы укажите staticфон, который не закрывает модальное окно при нажатии.
клавиатура
логический
истинный
Закрывает модальное окно при нажатии клавиши escape
фокус
логический
истинный
Ставит фокус на модальное окно при инициализации.
показывать
логический
истинный
Показывает модальное окно при инициализации.
Методы
Асинхронные методы и переходы
Все методы API являются асинхронными и запускают переход . Они возвращаются к вызывающей стороне сразу после начала перехода, но до его завершения . Кроме того, вызов метода переходного компонента будет игнорироваться .
Активирует ваш контент как модальный. Принимает необязательные параметры object.
.modal('toggle')
Вручную переключает модальное окно. Возвращает вызывающему объекту до того, как модальное окно действительно было показано или скрыто (т. е. до того, как произошло событие shown.bs.modalили ).hidden.bs.modal
.modal('show')
Вручную открывает модальное окно. Возвращает вызывающему объекту до того, как модальное окно действительно будет показано (т. е. до того , как shown.bs.modalпроизойдет событие).
.modal('hide')
Вручную скрывает модальное окно. Возвращает вызывающему объекту до того, как модальное окно будет фактически скрыто (т. е. до того , как hidden.bs.modalпроизойдет событие).
.modal('handleUpdate')
Вручную отрегулируйте положение модального окна, если высота модального окна изменяется, когда оно открыто (например, в случае появления полосы прокрутки).
.modal('dispose')
Уничтожает модальное окно элемента.
События
Модальный класс Bootstrap предоставляет несколько событий для подключения к модальным функциям. Все модальные события запускаются в самом модальном окне (т.е. в <div class="modal">).
Тип события
Описание
показать.bs.modal
Это событие срабатывает сразу же при showвызове метода экземпляра. Если это вызвано щелчком, элемент, по которому щелкнули, доступен как relatedTargetсвойство события.
показанный.bs.modal
Это событие запускается, когда модальное окно становится видимым для пользователя (будет ждать завершения переходов CSS). Если это вызвано щелчком, элемент, по которому щелкнули, доступен как relatedTargetсвойство события.
скрыть.bs.modal
Это событие запускается сразу после hideвызова метода экземпляра.
скрытый.bs.modal
Это событие запускается, когда модальное окно больше не скрыто от пользователя (будет ждать завершения переходов CSS).