Bootstrap Alert Plugin
You can add dismiss functionality to all alert messages using alert message plugin. As you know alert messages are frequently used to show information just like confirmation or warning messages to the user end. We will cover that how to work bootstrap alert plugin in this tutorial.
If you want to implement functionality of this plugin individually, simple include the alert.js file along the other JS files. Else as we have discussed in the tutorial of Bootstrap Plugin Overview, you can include bootstrap.jsor the minified bootstrap.min.js.
Usage
Using these two methods you can enable dismissal of an alert:
Via data attributes
Add data-dismiss=”alert” to your close button to automatically give an alert close functionality to dismiss via Data API.
|
1 |
Via JavaScript
Use the following line of code to dismiss via JavaScript:
|
1 |
Example
This example shows the use of alert plugin via data attributes.
|
1 |
Options
No options
Methods
The following are some useful methods for alert plugin:
| Method | Description | ||
|---|---|---|---|
| .alert() | This method wraps all alerts with close functionality.
|
||
| Close Method .alert(‘close’) | To enable all alerts to be closed, add this method.
|
To enable alerts to animate out when closed, make sure they have the .fade and .in class already applied to them.
Example
This example code shows use of .alert() method:
|
1 |
This example demonstrates use of .alert(‘close’) method:
|
1 |
Events
Bootstrap’s alert class exposes a few events for hooking into alert functionality.
| Event | Description | ||
|---|---|---|---|
| close.bs.alert | This event fires immediately when the close instance method is called.
|
||
| closed.bs.alert | This event is fired when the alert has been closed (will wait for CSS transitions to complete).
|
Example
This example shows the alert plugin events:
|
1 |
