Syntax error shown.bs.modal Bootstrap Event

shown.bs.modal Bootstrap Event

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

Here, on button click the modal would generate. The following is our button −

<button type="button" class="btn btn-default btn-lg" id="button1">
  Result
</button>

The following is the script to generate our modal on button click −

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

Now the alert would generate using the shown.bs.modal event after the modal is visible to the visitors −

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

Here is the complete code to learn how to implement the shown.bs.modal Bootstrap 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>
</head>
<body>
<div class="container">
  <h2>Entrance Exams</h2>
  <p>The following is the result of the entrance exams:</p>
  <button type="button" class="btn btn-default btn-lg" id="button1">Click for 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</h4>
        </div>
        <div class="modal-body">
          <p>Rahul, Amit and Shweta cleared the 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('shown.bs.modal', function () {
    alert('The modal is displayed completely!');
  });
});
</script>
</body>
</html>
Updated on: 2020-06-15T16:57:28+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements