Bootstrap - Плагин предупреждений

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

Если вы хотите включить эту функциональность плагина индивидуально, вам понадобится alert.js. В противном случае, как упоминалось в главе Обзор плагинов Bootstrap , вы можете включить bootstrap.js или уменьшенный bootstrap.min.js .

Применение

Вы можете включить отключение предупреждения двумя способами:

Via data attributes - Чтобы закрыть через API данных, просто добавьте data-dismiss = "alert" к вашей кнопке закрытия, чтобы автоматически включить функцию закрытия предупреждения.

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>

Via JavaScript - Чтобы отклонить через JavaScript, используйте следующий синтаксис -

$(".alert").alert()

пример

В следующем примере демонстрируется использование плагина предупреждений через атрибуты данных.

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>
   
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

Параметры

Здесь нет никаких вариантов.

Методы

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

Метод	Описание	пример
.alert ()	Этот метод обертывает все предупреждения с близкой функциональностью.	`$('#identifier').alert();`
Close Method .alert ('закрыть')	Чтобы разрешить закрытие всех предупреждений, добавьте этот метод.	`$('#identifier').alert('close');`

Чтобы оповещения отображались при закрытии, убедитесь, что у них есть .fade а также .in класс уже применен к ним.

пример

Следующий пример демонстрирует использование .alert() метод -

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert();
      });
   });  
</script>

Следующий пример демонстрирует использование .alert('close') метод -

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert('close');
      });
   });  
</script>

Попробуйте этот код, используя Try itредактор. Вы можете видеть, что функция закрытия применяется ко всем предупреждающим сообщениям, т.е. закрывает все предупреждающие сообщения, остальные предупреждающие сообщения также закрываются.

События

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

Событие	Описание	пример
close.bs.alert	Это событие запускается немедленно при вызове метода экземпляра close .	`$('#myalert').bind('close.bs.alert', function () { // do something })`
closed.bs.alert	Это событие запускается, когда предупреждение было закрыто (будет ожидать завершения переходов CSS).	`$('#myalert').bind('closed.bs.alert', function () { // do something })`

пример

В следующем примере демонстрируются события плагина предупреждений -

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<script type = "text/javascript">
   $(function(){
      $("#myAlert").bind('closed.bs.alert', function () {
         alert("Alert message box is closed.");
      });
   });
</script>