Bootstrap Alert Plugin
Alert messages are mostly used to display information such as warnings or confirmation messages to end users. With the Alert plugin, you can add a dismiss feature to all alert messages.
Usage
You can enable the dismissal functionality of alerts in the following two ways:
- Via data attributes: To add the dismiss functionality via the Data API, simply add to the close buttondata-dismiss="alert", and the close functionality will be added to the alert automatically.
<a class="close" data-dismiss="alert" href="../index.html" aria-hidden="true"> × </a>
- Via JavaScript: To add the dismiss functionality via JavaScript:
$(".alert").alert()
Example
The following example demonstrates how to use the Alert plugin via data attributes.
Example
Try it »
The result is as follows:
Options
There are no options.
Methods
The following are some useful methods in the Alert plugin:
| Method | Description | Example |
|---|---|---|
| .alert() | This method makes all alert boxes have a close functionality. |
$('#identifier').alert();
|
| Close method .alert('close') | Closes all alert boxes. |
$('#identifier').alert('close');
|
To enable animation effects when closing, make sure to add the.fadeand.in class。
Example
The following example demonstrates the.alert()usage of the method:
Example
Try it »
The following example demonstrates the.alert('close')usage of the method:
Example
Try it »
You can see that all alert boxes have the close functionality applied, i.e., 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 | When thecloseinstance method is called, this event is triggered immediately. |
$('#myalert').bind('close.bs.alert', function () {
// 执行一些动作...
})
|
| closed.bs.alert | This event is triggered when the alert is closed (it waits for the CSS transition to complete). |
$('#myalert').bind('closed.bs.alert', function () {
// 执行一些动作...
})
|
Example
The following example demonstrates the events of the Alert plugin:
Example
Try it »
The result is as follows:
