Сообщения оповещения в основном используются для отображения конечным пользователям информации, такой как предупреждения или подтверждения. Используя плагин предупреждающего сообщения, вы можете добавить функцию Alert ко всем сообщениям оповещения.
Содержание:
Если вы хотите включить эту функциональность плагина индивидуально, вам понадобится alert.js, после включения bootstrap.js или bootstrap.min.js.
Применение Alert
Вы можете включить Alert оповещения двумя способами:
- Через атрибуты данных. Чтобы отклонить через API данных, просто добавьте
data-reject = "alert"к кнопке закрытия, чтобы автоматически предоставлять функциональность предупреждения.<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true"> × </a> - Через JavaScript. Для отклонения через JavaScript используйте следующий синтаксис:
$(".alert").alert()
Следующий пример демонстрирует использование плагина предупреждения через атрибуты данных.
<div class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">
×
</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>Методы Alert
Ниже приведены некоторые полезные методы для плагина alert -
| Метод | Описание | Пример |
|---|---|---|
| .alert () | Этот метод полностью закрывает все предупреждения. | $('#identifier').alert(); |
| Close Method.alert('close') | Чтобы включить все предупреждения, добавьте этот метод. | $('#identifier').alert('close'); |
Чтобы включить оповещения для анимирования при закрытии, убедитесь, что у них уже есть классы .fade и .in.
Следующий пример демонстрирует использование .alert() метод -
<h3>Alert messages to demonstrate alert() method </h3>
<div id = "myAlert1" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert2" class = "alert alert-warning">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
<script type = "text/javascript">
$(function(){
$(".close").click(function(){
$("#myAlert1").alert();
$("#myAlert2").alert();
});
});
</script>
Следующий пример демонстрирует использование метода .alert('close') -
<h3>Alert messages to demonstrate alert('close') method </h3>
<div id = "myAlert3" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert4" class = "alert alert-warning">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
<script type = "text/javascript">
$(function(){
$(".close").click(function(){
$("#myAlert3").alert('close');
$("#myAlert4").alert('close');
});
});
</script>
События Alert
В следующей таблице перечислены события для работы с плагином предупреждений. Это событие можно использовать для включения функции предупреждения.
| Метод | Описание | Пример |
|---|---|---|
| close.bs.alert | Это событие срабатывает немедленно, когда вызывается метод close instance. |
$('#myalert5').bind('close.bs.alert', function () {
// do something
})
|
| closed.bs.alert | Это событие запускается, когда предупреждение закрыто (будет ждать завершения CSS-переходов). |
$('#myalert6').bind('closed.bs.alert', function () {
// do something
})
|
Следующий пример демонстрирует события плагина предупреждения -
<div id = "myAlert7" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<script type = "text/javascript">
$(function(){
$("#myAlert7").bind('closed.bs.alert', function () {
alert("Alert message box is closed.");
});
});
</script>