Метод JavaScript modal() Bootstrap Modal

Рассмотрим метод .modal() предназначенный для активации некоторого содержимого как модального окна, а также для его управления.

Имя	Описание
.modal(параметры)	Активирует контент, указанный с помощью идентификатора или класса как модальное окно. Принимает в качестве параметров следующие значения: `backdrop`, `keyboard`, `show`. Например: $(‘#myModal’).modal({ backdrop: ‘static’, keyboard: false });
.modal(‘toggle’)	Вручную переключает модальное окно, т.е. если модально окно открыто, то скрывает его. А если он скрыто, то отображает его. Например: $(‘#myModal’).modal(‘toggle’);
.modal(‘show’)	Вручную открывает модального окно. Например: $(‘#myMmodal’).modal(‘show’);
.modal(‘hide’)	Вручную скрывает модальное окно. Например: $(‘#myMmodal’).modal(‘hide’);

Например, активируем модальное окно для элемента, имеющего идентификатор #launch-modal:

<script type="text/javascript">
$(document).ready(function(){
  //подпишемся на событие click элемента, имеющего id="#launch-modal"
  $('#launch-modal').click(function() {
    //активируем контент, имеющий id="myModal", как модальное окно 
    $('#myModal').modal({
      //установим модальному окну следующие параметры:
      backdrop: 'static',
      keyboard: true
    });
  }); 
});
</script>

<!-- HTML код кнопки (для отображения модального окна) -->
<input id="launch-modal" type="button" class="btn btn-primary" value="открыть модальное окно">

<!-- HTML-код модального окна-->
<div id="myModal" class="modal fade">
  <!--...-->
</div>

Например, напишем скрипт, который будет открывать модальное окно каждые 5 минут после загрузки страницы:

<script>
  // после полной загрузки страницы
  $(window).load(function() {
    // вызываем метод setInterval, который будет вызывать модальное окно каждые 5 минут, если оно не открыто
    setInterval(function() {
      // Если окно не открыто (т.е. не имеет класс in)
      if (!$("#myModal").hasClass("in")) {
        // то открыть модальное окно 
        $("#myModal").modal('show');
      }
    }, 300000);
  });
</script>

<!-- Модальное окно-->
<div id="myModal" class="modal fade">
  <!--...-->
</div>

Например, создать модальное окно, которое в зависимости от нажатой кнопки имеет то или иное содержимое.

<!-- Кнопки, открывающие модальное окно myModal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-content="Содержимое 1...">Открыть модальное окно с содержимым 1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-content="Содержимое 2...">Открыть модальное окно с содержимым 2</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-content="Содержимое 1...">Открыть модальное окно с содержимым 3</button>

<!-- Модальное окно myModal -->
<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
        <h4 class="modal-title">Заголовок модального окна</h4>
      </div>
      <div class="modal-body">
        <p id="content"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

<script>
// при открытии модального окна
$('#myModal').on('show.bs.modal', function (event) {
  // получить кнопку, которая его открыло
  var button = $(event.relatedTarget) 
  // извлечь информацию из атрибута data-content
  var content = button.data('content') 
  // вывести эту информацию в элемент, имеющий id="content"
  $(this).find('#content').text(content); 
})
</script>

События, связанные с модальным окном

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

Имя	Описание
show.bs.modal	Событие происходит, когда вызывается метод `show()`, предназначенный для открытия модального окна. Если модальное окно вызывается с помощью клика (click), то элемент, который вызвал открытие модального окна, будет доступен как свойство `relatedTarget` события. Например: $(‘#myMmodal’).on(‘show.bs.modal’, function() { // сделать что-нибудь… })
shown.bs.modal	Событие происходит, когда модальное окно становится видимым для пользователя, т.е. когда оно будет полностью отрисовано с помощью стилей CSS. Если модальное окно вызывается с помощью клика (click), то элемент, который вызвал открытие модального окна будет доступен как свойство `relatedTarget` события. Например: $(‘#myMmodal’).on(‘shown.bs.modal’, function() { // сделать что-нибудь… })
hide.bs.modal	Событие происходит, когда вызывается метод hide(), который предназначен для скрытия модального окна. Например: $(‘#myMmodal’).on(‘hide.bs.modal’, function() { // сделать что-нибудь… })
hidden.bs.modal	Событие происходит, когда модальное окно становится полностью невидимым для пользователя, т.е. когда будут отработаны полностью все CSS-свойства, выполняющие этот процесс. Например: $(‘#myMmodal’).on(‘hidden.bs.modal’, function() { // сделать что-нибудь… })

Например, отобразить сообщение пользователю о том, когда модальное окно будет закрыто (полностью скрыто от пользователя):

<script>
$(document).ready(function(){
  //при нажатию на элемент, имеющий класс .open-modal, открыть модальное окно 
  $('.open-modal').click(function(){
    $('#myModal').modal('show');
  });
  //отобразить сообщение, когда модальное окно будет полностью скрыто от пользователя
  $("#myModal").on('hidden.bs.modal', function(){
    alert("Модальное окно было успешно закрыто.");
  });
});
</script>

<!-- Кнопка, открывающая модальное окно -->
<input type="button" class="btn btn-primary open-modal" value="Открыть модальное окно">

<!-- HTML-код модального окна-->
<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Заголовок модального окна</h4>
      </div>
      <div class="modal-body">
        <p>Содержимое модального окна...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

Результат вышепредставленного примера представим в виде следующих изображений:

HTML-страница, на которой расположена кнопка, открывающее модальное окно Bootstrap

HTML-страница, на которой открыто модальное окно Bootstrap

HTML-страница, на которой отображён результат отработки события hidden.bs.modal, которое происходит после полного скрытия модального окна

Как организовать переключение между 2 модальными окнами

Для того чтобы осуществить открытие из одного модального окна другого (при этом текущее модальное окно должно быть закрыто), на страницу необходимо добавить следующий скрипт:

JavaScript сценарий, который необходимо добавить на страницу, после подключения библиотеки jQuery и boostrap.min.js.

<script>
$(function(){

// #modal_1 - селектор 1 модального окна
// #modal_2 - селектор 2 модального окна, которое необходимо открыть из первого
var two_modal = function(id_modal_1,id_modal_2) {
  // определяет, необходимо ли при закрытии текущего модального окна открыть другое
  var show_modal_2 = false;
  // при нажатии на ссылку, содержащей в качестве href селектор модального окна
  $('a[href="' + id_modal_2 + '"]').click(function(e) {
    e.preventDefault();
    show_modal_2 = true;
    // скрыть текущее модальное окно
    $(id_modal_1).modal('hide');
  });
  // при скрытии текущего модального окна открыть другое, если значение переменной show_modal_2 равно true
  $(id_modal_1).on('hidden.bs.modal', function (e) {
    if (show_modal_2) {
      show_modal_2 = false;
      $(id_modal_2).modal('show');
    }
  })

}('#modal_1','#modal_2');

});
</script>

Пример HTML-кода, состоящего из 2 модальных окон:

<!-- Модальное окно 1 -->
<div class="modal fade" id="modal_1" tabindex="-1" role="dialog" aria-labelledby="modalLabel1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="modalLabel1">Заголовок модального окна 1</h4>
      </div>
      <div class="modal-body">
        <!-- Содержимое модального окна 1 -->
        <a href="#modal_2">Открыть 2 модальное окно</a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>


<!-- Модальное окно 2 -->
<div class="modal fade" id="modal_2" tabindex="-1" role="dialog" aria-labelledby="modalLabel2">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="modalLabel1">Заголовок модального окна 2</h4>
      </div>
      <div class="modal-body">
        <!-- Содержимое модального окна 2 -->
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

События, связанные с модальным окном

Как организовать переключение между 2 модальными окнами

Похожие записи