Bootstrap Event when the modal is about to be shown

BootstrapWeb DevelopmentCSS Framework

The show.bs.modal event in Bootstrap fires when the modal is about to be displayed. Here, I have added a script to generate an alert −

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

Above, on button click, the modal generates. After that, I have used the show.bs.modal event to generate an alert when the modal is just about to be visible.

The following is an example to demonstrate how to fire show.bs.modal event in Bootstrap when the modal is about to be displayed −

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>Team</h2>
  <p>The following is the result of the selections:</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 Players</h4>
        </div>
        <div class="modal-body">
          <p>Tom and Jack selected in the team.</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
Published on 09-Jul-2018 07:43:51
Advertisements