How to Launch Bootstrap Modal on Page Load?

Today, We want to share with you bootstrap modal on page load once.In this post we will show you Show After Page Loads and Open After few Seconds, hear for Launch bootstrap modal on page loads example we will give you demo and example for implement.In this post, we will learn about Simple Jquery Popup Onload Example with an example.

Display Bootstrap Modal First time page loads

Launch Bootstrap Modal on page load: JavaScript Example

Example 1:

<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">Pakainfo Modal Demo</h4>
            </div>
            <div class="modal-body" id= "modal-body">
                <p>Hindi Font Converter, Chanakya kundli krutidev to Unicode Converter,4cgandhi Unicode to Chanakya krutidev kundli Converter.</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>

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

Example 3:
Bootstrap Open Modal After few seconds of page Load Example:

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


<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">Pakainfo Modal Demo</h4>
            </div>
            <div class="modal-body">
                <p>Hindi Font Converter, Chanakya kundli krutidev to Unicode Converter,4cgandhi Unicode to Chanakya krutidev kundli Converter.</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>
<!--Modals ends here--->

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

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

</script>

I hope you get an idea about bootstrap modal auto trigger.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.