YouTip

# Bootstrap Alert Plugin Alert messages are primarily used to display information such as warnings or confirmations to end users. With the Alert plugin, you can add dismiss functionality to all alert messages. ## Usage You can enable the dismissal functionality for alerts in two ways: * **Via data attributes**: To add dismissal functionality via the Data API, simply add **data-dismiss="alert"** to the close button, and it will automatically add the close functionality to the alert. × * **Via JavaScript**: To add dismissal functionality via JavaScript: $(".alert").alert() ### Example The following example demonstrates the use of the Alert plugin via data attributes. ## Example [Try it »](#) The result is as follows:  ## Options _No options._ ## Methods Here are some useful methods for the Alert plugin: | Method | Description | Example | | --- | --- | --- | | .alert() | This method makes all alerts dismissible. | $('#identifier').alert(); | | **Close method** .alert('close') | Closes all alerts. | $('#identifier').alert('close'); | > To enable animation when closing, ensure you have added the **.fade** and **.in** classes. ### Example The following example demonstrates the use of the **.alert()** method: ## Example

Alert Plugin alert() Method

$(function(){ $(".close").click(function(){ $("#myAlert").alert(); $("#myAlert2").alert(); }); }); [Try it »](#) The following example demonstrates the use of the **.alert('close')** method: ## Example

Alert Plugin alert('close') Method

$(function(){ $(".close").click(function(){ $("#myAlert").alert('close'); $("#myAlert2").alert('close'); }); }); [Try it »](#) You can see that the dismiss functionality is applied to all alerts. Closing any alert will also close the remaining alerts. ## Events The table below 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 fires immediately when the _close_ instance method is called. | $('#myalert').bind('close.bs.alert', function () { // Perform some action...}) | | closed.bs.alert | This event is fired when the alert has been closed (will wait for CSS transition to complete). | $('#myalert').bind('closed.bs.alert', function () {// Perform some action...}) | ### Example The following example demonstrates the events of the Alert plugin: ## Example $(function(){ $("#myAlert").bind('closed.bs.alert', function(){alert("The alert message box has been closed."); }); }); [Try it »](#) The result is as follows: