modal(options) method in Bootstrap

BootstrapWeb DevelopmentCSS Framework

If you want to set content as a Bootstrap modal, then use the .modal(options) method.

For this, use jQuery to set the model on the click of a button as in the following code snippet −

$(document).ready(function(){
  $("#button1").click(function(){
    $("#newModal1").modal({backdrop: true});
  });
});

Let us now implement the modal(“options”) class. Here, we have two buttons that would generate different types of modals on click. One of them would close on clicking outside the modal, but another one will not close.

Here is the complete example −

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>Sample</h2>
   <button type="button" class="btn btn-default btn-lg" id="button1">Modal One</button>
   <button type="button" class="btn btn-default btn-lg" id="button2">Modal Two</button>

   <div class="modal fade" id="newModal1" 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 1</h4>
         </div>
       <div class="modal-body">
         <p>Click outside to close it.</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
       </div>
     </div>
    </div>
  </div>

  <div class="modal fade" id="newModal2" 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 2</h4>
        </div>
      <div class="modal-body">
       <p>It won't close on clicking outside.</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(){
    $("#newModal1").modal({backdrop: true});
  });
  $("#button2").click(function(){
    $("#newModal2").modal({backdrop: false});
  });
});
</script>

</body>
</html>
raja
Published on 09-Jul-2018 11:04:11
Advertisements