Teach with us

Bootstrap Event when the modal is fully hidden

The hidden.bs.modal event in Bootstrap fires when the modal is completely hidden.

Firstly, click on the hide button to hide the modal −

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

After clicking the button, the hidden.bs.modal fires and generates an alert using the following script −

$("#newModal").on('hidden.bs.modal', function () {
  alert('The modal is completely hidden now!');
});

Let us see an example to implement the hidden.bs.modal event −

Example

Live Demo

<!DOCTYPE html>
<html>
<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">Information</h4>
          </div>
          <div class="modal-body">
            <p>Crucial Information about the Examination.</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!');
    });
    $("#newModal").on('hidden.bs.modal', function () {
      alert('The modal is completely hidden now!');
    });
});
</script>

</body>
</html>
Updated on 15-Jun-2020 19:32:43

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements