Последние учебники веб-разработки
 

Bootstrap JS режимное


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

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

пример

$("#myModal").modal()
Попробуй сам "

Варианты Модальные

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

имя Тип По умолчанию Описание Попробуй
backdropboolean or the string "static"true Определяет, должен ли модальный иметь темно-накладку:

  • true - темная накладка
  • false - нет наложения (прозрачный)

Если вы укажете значение "static" , не представляется возможным , чтобы закрыть модальный при нажатии вне ее

Использование JS с использованием данных
keyboardbooleantrue Определяет , будет ли модальный можно закрыть с помощью кнопки побега (Esc) :

  • true - модальный может быть закрыто с Esc
  • false - модальный не может быть закрыт с Esc
Использование JS с использованием данных
showbooleantrue Указывает, следует ли показывать модальный при инициализации Использование 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">&times;</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>
Попробуй сам "