Bootstrap Alert Plugin

Alert messages are primarily used to display information such as warnings or confirmation messages to the end user. With the Alert plugin, you can add dismiss functionality to all alert messages.

Usage

You can enable the dismissal functionality of alerts in two ways:

• Through data attributes: Add the dismiss functionality via the Data API by simply adding data-dismiss="alert" to the close button, which automatically adds the close functionality to the alert.

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

• Through JavaScript: Add the dismiss functionality via JavaScript:

  $(".alert").alert()
  

Example

The following example demonstrates the usage of the Alert plugin through data attributes.

Example

<div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">
        &times;
    </a>
    <strong>Warning!</strong> Your network connection is problematic.
</div>

The result is as follows:

Options

No options available.

Methods

Here are some useful methods in the Alert plugin:

To enable animation effects when closing, make sure to add the .fade and .in classes.

Example

The following example demonstrates the usage of the .alert() method:

Example

<h3>Alert Plugin 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="myAlert2" class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Warning!</strong> Your network connection is problematic.
</div>

<script>
$(function(){
    $(".close").click(function(){
        $("#myAlert").alert();
        $("#myAlert2").alert();
    });
});
</script>

The following example demonstrates the usage of the .alert('close') method:

Example

<h3>Alert Plugin 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="myAlert2" class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Warning!</strong> Your network connection is problematic.
</div>

<script>
$(function(){
    $(".close").click(function(){
        $("#myAlert").alert('close');
        $("#myAlert2").alert('close');
    });
});
</script>

You can see that all alerts have the close functionality applied, meaning closing any alert will also close the remaining alerts.

Events

The following table lists the events used in the Alert plugin. These events can be used as hooks in functions.

| Event | Description | Example | | close.bs.alert | This event is fired immediately when the close instance method is called. | $('#myalert').bind('close.bs.alert', function () {<br> // Perform some actions...<br>}) | | closed.bs.alert | This event is fired when the alert box is closed (will wait for CSS transition to complete). | $('#myalert').bind('closed.bs.alert', function () {<br>    // Perform some actions...<br>}) |

Example

The following example demonstrates the events of the Alert plugin:

Example

<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>
$(function(){
    $("#myAlert").bind('closed.bs.alert', function () {
        alert("The alert message box is closed.");
    });
});
</script>

The result is as follows: