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 |
Указывает, должен ли модальный должен иметь темное наложение:
При указании значения "static" невозможно закрыть модальный при щелчке за его пределами |
|
| keyboard | boolean | true | Указывает, можно ли замкнуть модальную клавишу Escape (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) |