Рассмотрим метод .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">×</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>