Сообщения оповещения в основном используются для отображения конечным пользователям информации, такой как предупреждения или подтверждения. Используя плагин предупреждающего сообщения, вы можете добавить функцию 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> 

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok