Bootstrap - Alert Plugin

Alert messages are mostly used to display information such as warning or confirmation messages to the end users. Using alert message plugin you can add dismiss functionality to all alert messages.
You can enable dismissal of an alert in the following two ways −
Via data attributes − To dismiss via Data API just add data-dismiss = "alert" to your close button to automatically give an alert close functionality.
Via data attributes − To dismiss via Data API just add data-dismiss = "alert" to your close button to automatically give an alert close functionality.
<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>
Via JavaScript − To dismiss via JavaScript use the following syntax −
Via JavaScript − To dismiss via JavaScript use the following syntax −
$(".alert").alert()

The following example demonstrates the use of alert plugin via data attributes.
<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>
There are no options here.
The following are some useful methods for alert plugin −
$('#identifier').alert();

Close Method .alert('close')
$('#identifier').alert('close');

The following example demonstrates the use of .alert() method −
<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> 
The following example demonstrates the use of .alert('close') method −
<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 this code using the Try it editor. You can see that the close functionality is applied to all the alert messages i.e. close any alert message, rest of the alert messages also gets closed.
Following table lists the events to work with alert plugin. This event may be used to hook into the alert function.
$('#myalert').bind('close.bs.alert', function () {
   // do something
})
$('#myalert').bind('closed.bs.alert', function () {
   // do something
})
The following example demonstrates the alert plugin events −
<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>  

    26 Lectures 
     2 hours 

 Anadi Sharma

    54 Lectures 
     4.5 hours 

 Frahaan Hussain

    161 Lectures 
     14.5 hours 

 Eduonix Learning Solutions

    20 Lectures 
     4 hours 

 Azaz Patel

    15 Lectures 
     1.5 hours 

 Muhammad Ismail

    62 Lectures 
     8 hours 

 Yossef Ayman Zedan
 Print
 Add Notes
 Bookmark this page