Bootstrap Event when the modal is about to be hidden

The hide.bs.modal event in Bootstrap fires when the modal is about to be hidden.

Firstly, hide the Bootstrap modal on button click −

$("#button1").click(function(){
  $("#newModal").modal("hide");
});

Now, use the hide.bs.modal class and generate the alert when the modal is about to hide on button click −

$("#newModal").on('hide.bs.modal', function () {
  alert('The modal is about to be hidden.');
});

Let us see an example stating the usage of hide.bs.modal event −

Example

Live Demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
    #button1 {
      width: 140px;
      padding: 20px;
      bottom: 150px;
      z-index: 9999;
      font-size:15px;
      position: absolute;
      margin: 0 auto;
    }
    </style>
  </head>
<body>
  <div class="container">
    <h2>Sample</h2>
    <p>This is demo text.</p>
    <p>This is demo text.</p>
    <p>This is demo text.</p>
    <p>This is demo text.</p>
    <p>This is demo text.</p>
    <p>This is demo text.</p>
    <p>This is demo text.</p>
    <p>This is demo text.</p>
    <p>This is demo text.</p>
    <p>This is demo text.</p>
    <p>This is demo text.</p>
    <button type="button" class="btn btn-default btn-lg" id="button1">Click to hide</button>
    <div class="modal fade" id="newModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Sample Modal</h4>
          </div>
        <div class="modal-body">
          <p>This is demo text.</p>
        </div>
      </div>
    </div>
 </div>
</div>

<script>
  $(document).ready(function(){
    $("#newModal").modal("show");
    $("#button1").click(function(){
      $("#newModal").modal("hide");
    });
    $("#newModal").on('hide.bs.modal', function () {
      alert('The modal is about to be hidden.');
    });
  });
</script>
</body>
</html>

Kristi Castro

Updated on 18-Jun-2020 14:09:08

Previous Page Print Page Next Page