Alert box Events - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Alert

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Alert

Introduction

Bootstrap's alert class includes few events for hooking into alert functionality.

Event Description
close.bs.alert fires immediately when the close instance method is called.
closed.bs.alert fired when the alert message box has been closed.

The following example displays an alert message to the user when fade out transition of an alert message box has been fully completed.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example of Bootstrap 3 Alerts Events</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
  $("#myAlert").bind('closed.bs.alert', function(){
        console.log("Alert message box has been closed.");
    });<!--  ww w  .ja  v a2  s .c  o m-->
});
</script>

 </head>
 <body>
  <div>
   <div id="myAlert" class="alert alert-info">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Note!</strong> Please read the comments carefully.
   </div>
  </div>
 </body>
</html>

Related Tutorials