Modal Options with .modal(options) - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Modal

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Modal

Introduction

.modal(options) method activates the content as a modal. It also allows you to set options for them.

There are options which may be passed to modal() method to customize the modal window.

Name Type Default Value Description
backdrop boolean or the string 'static' true Includes a modal-black overlay area element.
keyboard booleantrue Closes the modal window on press of escape key.
show booleantrue Shows the modal when initialized or activate.
remote URLfalse content will be loaded via jQuery's load method and injected into the '.modal-content' div.

The following example shows how to prevent the modal from closing when a user clicks on the black overlay area behind the modal.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example of Bootstrap 3 Modals Methods</title>
    <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/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
  $(".launch-modal").click(function(){
    $("#myModal").modal({
      backdrop: 'static'
    });<!--from  w  w w  . j ava  2 s.  c  o  m-->
  });
});
</script>
 </head>
 <body>
  <div>
   <!-- Button HTML (to Trigger Modal) -->
   <input type="button" class="btn btn-lg btn-primary launch-modal" value="Launch Demo Modal">
   <!-- Modal HTML -->
   <div id="myModal" class="modal fade">
    <div class="modal-dialog">
     <div class="modal-content">
      <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
       <h4 class="modal-title">Confirmation</h4>
      </div>
      <div class="modal-body">
       <p>This is a test. This is a test. This is a test.</p>
       <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
       <p class="text-info"><small><strong>Note:</strong> If you click on the black area outside of this modal window it will not hide.</small></p>
      </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
       <button type="button" class="btn btn-primary">Save changes</button>
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

Related Tutorials