Bootstrap show.bs.modal Event

BootstrapWeb DevelopmentCSS Framework

The show.bs.modal event in Bootstrap fires when the modal is about to be displayed.

Here the alert is set using the same event and when the model is ready to be displayed, the event fires. This results in dispaying the alert to the visitor.

With that, I have also set a button that clicks the modal to open as shown in the below code snippet −

$(document).ready(function(){
  $("#button1").click(function(){
    $("#newModal").modal("show");
  });
  $("#newModal").on('show.bs.modal', function () {
    alert('The modal will be displayed now!');
  });
});

The following is an example to implement the show.bs.modal event in Bootstrap −

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>
</head>
<body>

<div class="container">
  <h2>Entrance Exams</h2>
  <p>The following is the result of the entrance exam:</p>
  <button type="button" class="btn btn-default btn-lg" id="button1">Result</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">Selected Students</h4>
        </div>
        <div class="modal-body">
          <p>Harry and Chris cleared the entrance exam.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
  $("#button1").click(function(){
    $("#newModal").modal("show");
  });
  $("#newModal").on('show.bs.modal', function () {
    alert('The modal will be displayed now!');
  });
});
</script>

</body>
</html>
raja
Updated on 15-Jun-2020 17:01:43

Advertisements