Launch Bootstrap Modal on page load


Launch Bootstrap Modal on page load – Sometimes we need to open bootstrap modal on page load for some reasons. We can trigger the modal event on page load using the javascript. Here in this tutorial we are going to explain how you can launch bootstrap modal when page is loaded. We will explain this with demo.


Launch Bootstrap Modal on page load | Show After Page Load | Open After few Seconds | jQuery | Example

You can launch modal on page load simply as below –

Launch Bootstrap Modal on page load: JavaScript Example

  <!----modal starts here--->
<div id="modal" class="modal fade" role='dialog'>
    <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">Tutorialsplane Modal Demo</h4>
            </div>
            <div class="modal-body" id= "modal-body">
                <p>Here the description starts here........</p>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
      </div>
  </div>
<!--Modal ends here--->
<script type="text/javascript">
    $(window).load(function(){
        $('#modal').modal('show');
    });
</script>

Try it »

The above method will be called on window load as soon as it is triggered modal is launched. If you run the above example it will show modal on page load-

Launch Bootstrap Modal on page load

Bootstrap modal on page load once | JavaScript

You can load modal only one time after page load using the jQuery cookie. Here is an example –

Launch Bootstrap Modal on page load: JavaScript Example

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
            <script>
            $(document).ready(function() {
                 if ($.cookie('checkModal') == null) {
                     $('#modal').modal('show');
                     $.cookie('checkModal', '1');
                 }
             });
            </script>

Open Modal Automatically after 2 Seconds

Sometimes we need to trigger modal automatically after 2 seconds, 3 seconds or few second of page load. You can do it easily using the jQuery simply as below-

Bootstrap Open Modal After few seconds of page Load Example:

<div class="container" style="padding:150px;">

   <!----modal starts here--->
<div id="modal" class="modal fade" role='dialog' data-backdrop="false">
    <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">Tutorialsplane Modal Demo</h4>
            </div>
            <div class="modal-body">
                <p>Here the description starts here........</p>
                
            </div>
            <div class="modal-footer">
                <button type="button" data-backdrop="false" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
      </div>
  </div>
<!--Modal ends here--->

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal">Click Here To Open Modal</button>
</div>
<script type="text/javascript">  
  function showModal(){
  $('#modal').modal('show');
  }
    // Show After 02 Seconds
    setTimeout(function(){ showModal(); }, 2000);

    // Show After 10 Seconds
    //setTimeout(function(){ showModal(); }, 10000);

</script>

Try it »


Advertisements

Add Comment

📖 Read More




Popup window on page load JQuery

- You can also use bootatrap model as popup window on page load, you can call $('#modal').modal('show'); on page load using jQuery.

Bootstrap modal on page load once

- You can use cookie to load the model popup only once on page load.