Modal Events - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Modal

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

Introduction

Bootstrap's modal class has the following events.

Event Description
show.bs.modal fires when the show instance method is called.
shown.bs.modal fired when the modal has been made visible to the user.
hide.bs.modal fired when the hide instance method has been called.
hidden.bs.modal fired when the modal has finished being hidden from the user.
loaded.bs.modal fired when the modal has loaded content using the remote option.

The following example displays an alert message to the user when fade out transition of the modal window 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 Modal 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(){
  $('.open-modal').click(function(){
    $('#myModal').modal('show');
  });<!--from ww  w. j a  v  a2s. c  om-->
    $("#myModal").on('hidden.bs.modal', function(){
    console.log("Modal window has been completely closed.");
  });
});
</script>
  <style type="text/css">

</style>
 </head>
 <body>
  <div>
   <!-- Button HTML (to Trigger Modal) -->
   <input type="button" class="btn btn-lg btn-primary open-modal" value="Show Demo Modal">
   <!-- Modal HTML -->
   <div id="myModal" class="modal fade">
    <div class="modal-dialog">
     <div class="modal-content">
      <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
       <h4 class="modal-title">Confirmation</h4>
      </div>
      <div class="modal-body">
       <p>This is a test. This is a test. This is a test.</p>
       <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
      </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
       <button type="button" class="btn btn-primary">Save changes</button>
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

Related Tutorials