JS режимное (modal.js)
Плагин модальное диалоговое окно окно / всплывающее окно, которое отображается в верхней части текущей страницы.
Для учебника о модальности, читайте нашу Bootstrap Модальные Учебник .
Классы Modal плагинов
| Класс | Описание |
|---|---|
| .modal | Создает модальный |
| .modal-content | Стили модальный правильно с границы, цвет фона и т.д. Этот класс используется для добавления модальной в заголовок, тело и нижний колонтитулы. |
| .modal-header | Определяет стиль для заголовка модальным |
| .modal-body | Определяет стиль для тела модальный |
| .modal-footer | Определяет стиль для нижнего колонтитула в модальной. Примечание: Эта область выравнивается по правому краю по умолчанию. Чтобы это изменить, переписать CSS с выравнивания текста: слева | центр |
| .modal-sm | Определяет небольшой модальный |
| .modal-lg | Определяет большой модальной |
| .fade | Добавляет анимация / эффект перехода, который исчезает модальный внутри и вне |
Trigger модальной Via 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>
Попробуй сам " Trigger Via JavaScript
Включить вручную с помощью:
Варианты Модальные
Параметры могут быть переданы с помощью атрибутов данных или JavaScript. Для атрибутов данных, добавьте имя параметра к данные-, так как в data-backdrop="" .
| имя | Тип | По умолчанию | Описание | Попробуй |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true | Определяет, должен ли модальный иметь темно-накладку:
Если вы укажете значение "static" , не представляется возможным , чтобы закрыть модальный при нажатии вне ее | Использование JS с использованием данных |
| keyboard | boolean | true | Определяет , будет ли модальный можно закрыть с помощью кнопки побега (Esc) :
| Использование JS с использованием данных |
| show | boolean | true | Указывает, следует ли показывать модальный при инициализации | Использование JS с использованием данных |
Методы Модальные
В следующей таблице перечислены все доступные методы модальные.
| метод | Описание | Попробуй |
|---|---|---|
| .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> Попробуй сам "