ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap 4 Tutorial

BS4 HOME BS4 Get Started BS4 Grid Basic BS4 Typography BS4 Colors BS4 Tables BS4 Images BS4 Jumbotron BS4 Alerts BS4 Buttons BS4 Button Groups BS4 Badges BS4 Progress Bars BS4 Pagination BS4 List Groups BS4 Cards BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbar BS4 Forms BS4 Inputs BS4 Carousel BS4 Modal BS4 Tooltip BS4 Popover BS4 Scrollspy BS4 Utilities BS4 Flex BS4 Media Objects BS4 Filters

Bootstrap 4 Grid

BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples

Bootstrap 4 Theme

BS4 Basic Template

Bootstrap 4 Ref

All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip

Bootstrap JS Modal


Модальные классы CSS

Для учебника о модальных, прочитайте наш Bootstrap Сппаврчник.

Класс Описание
.modal Создает модальный
.modal-content Стили модальных правильно с границей, цвет фона и т.д. Используйте этот класс для добавления заголовка, тела и нижнего колонтитула модального
.modal-dialog-centered Центрировать модальные вертикально и горизонтально в пределах страницы
.modal-header Определяет стиль заголовка модального
.modal-body Определяет стиль тела модального
.modal-footer Определяет стиль нижнего колонтитула в модальном. Примечание: По умолчанию эта область выравнивается по правому краю. Чтобы изменить это, добавьте выравнивание содержимого-начало или выравнивание-контент-центр вместе с. модальный-нижний класс
.modal-sm Задает небольшой модальный
.modal-lg Задает большой модальный
.fade Добавляет эффект анимации/перехода, который исчезает модальный в и из

Вызвать модальные через Data-* атрибуты

Добавить data-toggle="modal" и data-target="#modalID" к любому элементу.

Примечание: Для <a> элементов, опустить data-target и использовать href="#modalID" вместо:

Пример

<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>

<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>

Триггер через JavaScript

Включить вручную с помощью:

Пример

$("#myModal").modal()

Модальные параметры

Параметры могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра в Data-, как в data-backdrop="".

Имя Тип По умолчанию Описание
backdrop boolean or the string "static" true Указывает, должен ли модальный должен иметь темное наложение:

  • true - dark overlay
  • false - no overlay (transparent)

При указании значения "static" невозможно закрыть модальный при щелчке за его пределами

keyboard boolean true Указывает, можно ли замкнуть модальную клавишу Escape (ESC):

  • true - the modal can be closed with Esc
  • false - the modal cannot be closed with Esc
show boolean true Указывает, следует ли отображать модальный при инициализации

Модальные методы

В следующей таблице перечислены все доступные модальные методы.

Метод Описание
.modal(options) Активирует содержимое как модальное. Приведенные выше параметры для допустимых значений
.modal("toggle") Переключение модального
.modal("show") Открывает модальный
.modal("hide") Скрывает модальный

Модальные события

В следующей таблице перечислены все доступные модальные события.

Событие Описание
show.bs.modal Происходит, когда модальный вот-вот будет показан
shown.bs.modal Происходит при полном отображении модального (после завершения переходов CSS)
hide.bs.modal Происходит, когда модальный вот-вот будет скрыт
hidden.bs.modal Происходит, когда модальный полностью скрыт (после завершения переходов CSS)