Bootstrap - Alert Plugin

Advertisements

Previous Page
Next Page  

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.

If you want to include this plugin functionality individually, then you will need the alert.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include the bootstrap.js or the minified bootstrap.min.js.

Usage

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.

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

  • Via JavaScript − To dismiss via JavaScript use the following syntax −

$(".alert").alert()

Example

The following example demonstrates the use of alert plugin via data attributes.

Live Demo 
<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>

Options

There are no options here.

Methods

The following are some useful methods for alert plugin −

Method Description Example
.alert() This method wraps all alerts with close functionality. 
$('#identifier').alert();

Close Method .alert('close')

 To enable all alerts to be closed, add this method. 
$('#identifier').alert('close');
To enable alerts to animate out when closed, make sure they have the .fade and .in class already applied to them.

Example

The following example demonstrates the use of .alert() method −

Live Demo 
<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 −

Live Demo 
<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.

Events

Following table lists the events to work with alert plugin. This event may be used to hook into the alert function.

Event Description Example
close.bs.alert This event fires immediately when the close instance method is called. 
$('#myalert').bind('close.bs.alert', function () {
   // do something
})
closed.bs.alert This event is fired when the alert has been closed (will wait for CSS transitions to complete). 
$('#myalert').bind('closed.bs.alert', function () {
   // do something
})

Example

The following example demonstrates the alert plugin events −

Live Demo 
<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>
Advertisements