How to launch Bootstrap modal on page load

Topic: Bootstrap / Less« Prev|Next »

Answer: Use the Bootstrap .modal('show') method

You can use the Bootstrap .modal('show') method for launching the modal window automatically when page load without clicking anything. A common example of this technique is loading the modal when user landed on the home page and requesting them to subscribe the website newsletter. Here's an example:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>Open Bootstrap Modal on Page Load</title>
  • <link rel="stylesheet" href="css/bootstrap.min.css">
  • <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  • <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  • <script src="js/bootstrap.min.js"></script>
  • <script type="text/javascript">
  •     $(document).ready(function(){
  •         $("#myModal").modal('show');
  •     });
  • </script>
  • </head>
  • <body>
  • <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">&times;</button>
  •                 <h4 class="modal-title">Subscribe our Newsletter</h4>
  •             </div>
  •             <div class="modal-body">
  •                 <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
  •                 <form>
  •                     <div class="form-group">
  •                         <input type="text" class="form-control" placeholder="Name">
  •                     </div>
  •                     <div class="form-group">
  •                         <input type="email" class="form-control" placeholder="Email Address">
  •                     </div>
  •                     <button type="submit" class="btn btn-primary">Subscribe</button>
  •                 </form>
  •             </div>
  •         </div>
  •     </div>
  • </div>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.