Bootstrap with CSS
- Bootstrap - Responsive utilities
- Bootstrap - Helper Classes
- Bootstrap - Images
- Bootstrap - Buttons
- Bootstrap - Forms
- Bootstrap - Tables
- Bootstrap - Code
- Bootstrap - Typography
- Bootstrap - CSS Overview
- Bootstrap - Grid System
Bootstrap Layout Components
- Bootstrap - Wells
- Bootstrap - Panels
- Bootstrap - List Group
- Bootstrap - Media Object
- Bootstrap - Progress Bars
- Bootstrap - Alerts
- Bootstrap - Thumbnails
- Bootstrap - Page Header
- Bootstrap - Jumbotron
- Bootstrap - Badges
- Bootstrap - Labels
- Bootstrap - Pagination
- Bootstrap - Breadcrumb
- Bootstrap - Navbar
- Bootstrap - Navigation Elements
- Bootstrap - Input Groups
- Bootstrap - Button Dropdowns
- Bootstrap - Button Groups
- Bootstrap - Dropdowns
- Bootstrap - Glyphicons
Bootstrap Plugins
- Bootstrap - Affix Plugin
- Bootstrap - Carousel Plugin
- Bootstrap - Collapse Plugin
- Bootstrap - Button Plugin
- Bootstrap - Alert Plugin
- Bootstrap - Popover Plugin
- Bootstrap - Tooltip Plugin
- Bootstrap - Tab Plugin
- Bootstrap - Scrollspy Plugin
- Bootstrap - Dropdown Plugin
- Bootstrap - Modal Plugin
- Bootstrap - Transition Plugin
- Bootstrap - Plugins Overview
Bootstrap Demos
- Bootstrap - featured Demo
- Bootstrap - Icons Demo
- Bootstrap - Social Icons Demo
- Bootstrap - Calendar Demo
- Bootstrap - Map Demo
- Bootstrap - Caption Demo
- Bootstrap - Tabbed slider Demo
- Bootstrap - Ajax Demo
- Bootstrap - Admin Interface Demo
- Bootstrap - Alert Demo
- Bootstrap - Time line Demo
- Bootstrap - Slider Demo
- Bootstrap - Material Design Demo
- Bootstrap - Blog Demo
- Bootstrap - Navigation Demo
- Bootstrap - Responsive Demo
- Bootstrap - Images Demo
- Bootstrap - Buttons Demo
- Bootstrap - Form Demo
- Bootstrap - Table Demo
- Bootstrap - Grid Demo
Bootstrap Useful Resources
- Bootstrap - Discussion
- Bootstrap - Useful Resources
- Bootstrap - Quick Guide
- Bootstrap - Questions and Answers
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Bootstrap - Alert Plugin
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 functionapty to all alert messages.
If you want to include this plugin functionapty inspanidually, then you will need the alert.js. Else, as mentioned in the chapter, 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 functionapty.
<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true"> × </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.
<span class = "alert alert-success"> <a href = "#" class = "close" data-dismiss = "alert"> × </a> <strong>Warning!</strong> There was a problem with your network connection. </span>
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 functionapty. |
$( #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 appped to them.
Example
The following example demonstrates the use of .alert() method −
<h3>Alert messages to demonstrate alert() method </h3> <span id = "myAlert" class = "alert alert-success"> <a href = "#" class = "close" data-dismiss = "alert">×</a> <strong>Success!</strong> the result is successful. </span> <span id = "myAlert" class = "alert alert-warning"> <a href = "#" class = "close" data-dismiss = "alert">×</a> <strong>Warning!</strong> There was a problem with your network connection. </span> <script type = "text/javascript"> $(function(){ $(".close").cpck(function(){ $("#myAlert").alert(); }); }); </script>
The following example demonstrates the use of .alert( close ) method −
<h3>Alert messages to demonstrate alert( close ) method </h3> <span id = "myAlert" class = "alert alert-success"> <a href = "#" class = "close" data-dismiss = "alert">×</a> <strong>Success!</strong> the result is successful. </span> <span id = "myAlert" class = "alert alert-warning"> <a href = "#" class = "close" data-dismiss = "alert">×</a> <strong>Warning!</strong> There was a problem with your network connection. </span> <script type = "text/javascript"> $(function(){ $(".close").cpck(function(){ $("#myAlert").alert( close ); }); }); </script>
Try this code using the Try it editor. You can see that the close functionapty is appped to all the alert messages i.e. close any alert message, rest of the alert messages also gets closed.
Events
Following table psts 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 −
<span id = "myAlert" class = "alert alert-success"> <a href = "#" class = "close" data-dismiss = "alert">×</a> <strong>Success!</strong> the result is successful. </span> <script type = "text/javascript"> $(function(){ $("#myAlert").bind( closed.bs.alert , function () { alert("Alert message box is closed."); }); }); </script>Advertisements