English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной курс Bootstrap

Плагин Bootstrap

Модальное окно (Modal) плагин Bootstrap

Модальное окно (Modal) - это подокно, которое покрывает родительское окно. Обычно, цель - показать содержимое из отдельного источника, позволяя взаимодействовать без выхода из родительского окна. Подокно может предоставлять информацию, интерактивные элементы и т.д.

Если вы хотите отдельно引用 функции этого плагина, вам нужно ссылаться на modal.js. Или, как Обзор плагинов Bootstrap как упоминалось в главе bootstrap.js или сжатой версии bootstrap.min.js.

Использование

Вы можете переключить скрытое содержимое модального окна (Modal) плагина:

  • через данные атрибутыУстановить атрибуты на контроллер элемента (например, кнопку или ссылку) data-toggle="modal"и одновременно установить data-target="#identifier" или href="#identifier" определяет модальное окно, которое нужно переключить (с id="identifier").

  • через JavaScriptИспользуя эту технологию, вы можете вызвать модальное окно с id="identifier" простым строкой JavaScript:

    $('#identifier').modal(options)

Онлайн пример

Пример статического модального окна, как показано в следующем примере:

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap пример - модальное окно (Modal) плагин</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Создание модального окна (Modal)</h2>
<!-- Кнопка запуска модального окна -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Начало демонстрации модального окна
</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<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" id="myModalLabel">
					Заголовок модального окна (Modal)
				</h4>
			</div>
			<div class="modal-body">
				Добавьте здесь текст
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть
				</button>
				<button type="button" class="btn btn-primary">
					Подтвердить изменения
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</body>
</html>
Проверьте, нажмите <›/›

Результаты показаны ниже:

Комментарий к коду:

  • Для использования модального окна вам нужно иметь某种 триггер. Вы можете использовать кнопку или ссылку. В данном случае мы используем кнопку.

  • Если вы внимательно посмотрите на приведенный выше код, вы заметите, что в теге <button>,data-target="#myModal" является целевым модальным окном, которое вы хотите загрузить на страницу. Вы можете создать несколько модальных окон на странице и создать разные триггеры для каждого из них. teraz, ясно, что вы не можете загрузить несколько модулей одновременно, но вы можете создать несколько модальных окон, которые будут загружаться в разное время.

  • В модальном окне необходимо учитывать два момента:

  • Первым является .modalиспользуется для распознавания содержимого <div> как модального окна.

  • Вторым является .fade class. При переключении модального окна оно вызывает плавное появление и исчезновение содержимого.

  • aria-labelledby="myModalLabel"Этот атрибут ссылается на заголовок модального окна.

  • Атрибут aria-hidden="true" Используется для того, чтобы сохранить модальное окно невидимым, до тех пор, пока триггер не будет активирован (например, нажатие на соответствующую кнопку).

  • <div>, class="modal-header" это класс, который определяет стиль заголовка модального окна.

  • class="close"class="close", это CSS класс, который используется для настройки стиля кнопки закрытия модального окна.

  • data-dismiss="modal"data-dismiss="modal", это пользовательская данные attribute HTML5, который используется для закрытия модального окна.

  • class="modal-body"class="modal-body", это CSS класс Bootstrap, который используется для настройки стиля的主要内容 модального окна.

  • class="modal-footer"class="modal-footer", это CSS класс Bootstrap, который используется для настройки стиля нижней части модального окна.

  • data-toggle="modal"data-toggle="modal", это пользовательская данные attribute HTML5, которая используется для открытия модального окна.

Параметр

Есть некоторые параметры, которые можно использовать для настройки внешнего вида и ощущений модального окна (Modal Window), они передаются через данные атрибуты или JavaScript. В таблице приведены эти параметры:

Название параметраТип/Значение по умолчаниюИмя данных属性Описание
backdropboolean или string 'static'
Значение по умолчанию: true		data-backdropУказать статический фон, при нажатии на внешнюю часть модального окна окно не закроется.
keyboardboolean
Значение по умолчанию: true		data-keyboardЗакрывать модальное окно при нажатии клавиши escape, если установлено значение false, то клавиша будет неактивна.
showboolean
Значение по умолчанию: true		data-showПоказывать модальное окно при инициализации.
remotepath
Значение по умолчанию: false		data-remoteИспользование jQuery .load Методы, которые инъектируют содержимое в тело модального окна. Если добавлен href с действительным URL, то будет загружено содержимое, как показано в следующем примере:
<a data-toggle="modal" href="remote.html" data-target="#modal">Нажмите на меня</a>

Методы

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

МетодыОписаниеПример
Опции: .modal(options)Включить содержимое в качестве активного модального окна. Принимает опциональный объект опций.
$('#identifier').modal({
keyboard: false
}
Переключить: .modal('toggle')Ручное переключение модального окна.
$('#identifier').modal('toggle')
Показать: .modal('show')Ручное открытие модального окна.
$('#identifier').modal('show')
Скрыть: .modal('hide')Ручное скрытие модального окна.
$('#identifier').modal('hide')

Онлайн пример

Ниже приведен пример использования методов:

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Методы модального окна (Modal) плагина</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Методы модального окна (Modal) плагина Bootstrap</h2>
<!-- Кнопка запуска модального окна -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Начало демонстрации модального окна
</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<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" id="myModalLabel">
					Заголовок модального окна (Modal)
				</h4>
			</div>
			<div class="modal-body">
				Нажмите кнопку ESC, чтобы выйти.
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"　
						data-dismiss="modal">Закрыть
				</button>
				<button type="button" class="btn btn-primary">
					Подтвердить изменения
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
Проверьте, нажмите <›/›

Результаты показаны ниже:

Достаточно нажать клавишу ESC, чтобы выйти из модального окна.

События

В таблице ниже перечислены события, используемые в модальном окне. Эти события могут быть использованы в функции в качестве гвоздей.

СобытияОписаниеПример
show.bs.modalВключается после вызова метода show.
$('#identifier').on('show.bs.modal', function () {
　　//　Выполнить некоторые действия...
}
shown.bs.modalВключается при видимости модального окна для пользователя (ждет завершения CSS-транзита).
$('#identifier').on('shown.bs.modal', function () {
　　//　Выполнить некоторые действия...
}
hide.bs.modalВключается при вызове примерного метода hide.
$('#identifier').on('hide.bs.modal', function () {
　　//　Выполнить некоторые действия...
}
hidden.bs.modalТриггеряется, когда модальное окно полностью скрыто от пользователя.
$('#identifier').on('hidden.bs.modal', function () {
　　//　Выполнить некоторые действия...
}

Онлайн пример

Ниже приведен пример использования событий:

Результаты показаны ниже:

Как показано в примере выше, если вы нажали закрыть кнопка, то есть скрыть Если событие произошло, будет отображено сообщение с предупреждением.

Плагин дропдаун-меню BootstrapПлагин эффектов перехода Bootstrap