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

Основной учебник Bootstrap

Плагины Bootstrap

Плагин Bootstrap уведомления (Alert)

Сообщения окна предупреждения (Alert) обычно используются для отображения информации, такой как предупреждения или сообщения подтверждения, для конечных пользователей. Используя плагин окна предупреждения (Alert), вы можете добавить функцию отмены (dismiss) ко всем сообщениям окна предупреждения.

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

Вы можете активировать функцию отмены (dismissal) уведомлений двумя способами:

  • Добавление через атрибут dataДобавление функции отмены через Data API (Data API), для этого нужно добавить data-dismiss="alert"автоматически добавляет функцию закрытия к уведомлениям.

    <a data-dismiss="alert" href="#" aria-hidden="true">
　　　　×
</a>

  • Добавление через JavaScriptДобавление функции отмены через JavaScript:

    $(".alert").alert()

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

Ниже приведен пример использования модуля уведомлений (Alert) плагина через атрибут data.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Модуль уведомлений (Alert) плагин</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>
<div class="alert alert-warning">
	<a href="#" class="close" data-dismiss="alert">
		×
	</a>
	<strong>Внимание!</strong> У вас есть проблемы с подключением к сети.
</div>
</body>
</html>
Проверьте, ‹/›

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

Опции

Нет опций.

Метод

Ниже приведены некоторые полезные методы модуля уведомлений (Alert) плагина:

МетодОписаниеПример
.alert()Этот метод позволяет всем уведомлениям иметь функцию закрытия.
$('#identifier').alert();
Метод закрытия .alert('close')Закрыть все уведомления.
$('#identifier').alert('close');

Если вы хотите включить анимацию при закрытии, убедитесь, что добавлено .fade и .in class。

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

Ниже приведен пример .alert() Использование метода:

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример Bootstrap - Модуль уведомлений (Alert) плагин method alert()</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>Модуль уведомлений (Alert) плагин method alert()</h2>
<div id="myAlert" class="alert alert-success">
　　　　<a href="#" class="close" data-dismiss="alert">×</a>
　　　　<strong>Успешно!</strong> Результат успешен.
</div>
<div id="myAlert2" class="alert alert-warning">
　　　　<a href="#" class="close" data-dismiss="alert">×</a>
　　　　<strong>Внимание!</strong> У вас есть проблемы с подключением к сети.
</div>
　
<script>
$(function() {
　　　　$(".close").click(function(){
　　　　　　　　$("#myAlert").alert();
　　　　　　　　$("#myAlert2").alert();
　　　　});
});
</script>
</body>
</html>
Проверьте, ‹/›

Ниже приведен пример .alert('close') Использование метода:

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример Bootstrap - Модуль уведомлений (Alert) плагин method alert('close')</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>Модуль уведомлений (Alert) плагин method alert('close')</h2>
<div id="myAlert" class="alert alert-success">
　　　　<a href="#" class="close" data-dismiss="alert">×</a>
　　　　<strong>Успешно!</strong> Результат успешен.
</div>
<div id="myAlert2" class="alert alert-warning">
　　　　<a href="#" class="close" data-dismiss="alert">×</a>
　　　　<strong>Внимание!</strong> У вас есть проблемы с подключением к сети.
</div>
　
<script>
$(function() {
　　　　$(".close").click(function(){
　　　　　　　　$("#myAlert").alert('close');
　　　　　　　　$("#myAlert2").alert('close');
　　　　});
});
</script>
</body>
</html>
Проверьте, ‹/›

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

Событие

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

СобытиеОписаниеПример
close.bs.alertКогда вызывается close Это событие срабатывает немедленно при вызове метода.
$('#myalert').bind('close.bs.alert', function () {
　　// Выполнить некоторые действия...
})
closed.bs.alertЭто событие срабатывает при закрытии проблемы (ожидается завершение CSS-транзита).
$('#myalert').bind('closed.bs.alert', function () {
　　　　// Выполнить некоторые действия...
})

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

Ниже приведен пример, который демонстрирует события плагина проблемы (Alert):

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Проблемное окно (Alert) плагин событий</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>
<div id="myAlert" class="alert alert-success">
	<a href="#" class="close" data-dismiss="alert">×</a>
	<strong>Успешно!</strong> Результат успешен.
</div>
<script type="text/javascript">
$(function() {
	$("#myAlert").bind('closed.bs.alert', function () {
		alert("Окно предупреждения закрыто.");
	});
});
</script>　　
</body>
</html>
Проверьте, ‹/›

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

Плагин кнопок BootstrapПлагин всплывающих окон Bootstrap