Bootstrap JS Modal
JS модальные (модальные. js)
Модальный плагин представляет собой диалоговое окно/всплывающее окно, которое отображается поверх текущей страницы.
Для учебника о модальных, прочитайте наш загрузочный модальных учебник.
Модальные классы подключаемого модуля
| Класс | Описание |
|---|---|
| .modal | Создает модальный |
| .modal-content | Стили модальных правильно с границей, цвет фона и т.д. Этот класс используется для добавления заголовка, тела и нижнего колонтитула модального типа. |
| .modal-header | Определяет стиль заголовка модального |
| .modal-body | Определяет стиль тела модального |
| .modal-footer | Определяет стиль нижнего колонтитула в модальном. Примечание: По умолчанию эта область выравнивается по правому краю. Чтобы изменить это, перезаписать CSS с текстом-выравнивание: левый | центр |
| .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 | Логическое значение или строка "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) |
Другие примеры
Вход модальный
В следующем примере создается модальное имя входа:
Пример
<div class="container">
<h2>Modal Login Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div>
