WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to Close a Bootstrap Modal Window Using jQuery

Topic: Bootstrap / LessPrev|Next

Answer: Use the modal('hide') Method

You can simply use the modal('hide') method to hide or close the modal window in Bootstrap using jQuery. Other related Bootstrap's modal methods are modal('show') and modal('toggle').

Let's try out this example which dynamically close Bootstrap modal on a button click:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery Close Bootstrap Modal Window on Button Click</title>
  • <link rel="stylesheet" href="css/bootstrap.min.css">
  • <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  • <script src="js/bootstrap.min.js"></script>
  • <script>
  •     $(document).ready(function(){
  •         // Open modal on page load
  •         $("#myModal").modal('show');
  •  
  •         // Close modal on button click
  •         $(".btn").click(function(){
  •             $("#myModal").modal('hide');
  •         });
  •     });
  • </script>
  • <style>
  •     .bs-example{
  •         margin: 20px;
  •     }
  • </style>
  • </head>
  • <body>
  • <div class="bs-example">
  •     <div id="myModal" class="modal fade" tabindex="-1">
  •         <div class="modal-dialog">
  •             <div class="modal-content">
  •                 <div class="modal-header">
  •                     <h5 class="modal-title">Modal Title</h5>
  •                     <button type="button" class="close" data-dismiss="modal">&times;</button>
  •                 </div>
  •                 <div class="modal-body">
  •                     <p>This is a simple Bootstrap modal. Click the "Close button", "cross icon" or "dark gray area" to close or hide the modal.</p>
  •                 </div>
  •                 <div class="modal-footer">
  •                     <button type="button" class="btn btn-primary">Close Modal</button>
  •                 </div>
  •             </div>
  •         </div>
  •     </div>
  • </div>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates

Your Feedback:

We would love to hear from you, please drop us a line.