How to Open Bootstrap Modal Box after few seconds

Solution:  Here are some steps to load the modal box of bootstrap after few seconds; there is a need sometimes to load the modal box on the website after few seconds; this is a common requirement for the website, such as a pop of inquiry form, offer pop up, etc., So by following these steps we can achieve :

Step 1 :  Add Modal Box of bootstrap

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Step 2 : Add script after your jquery CDN file or before closing body tag

<script type="text/javascript">
$(window).on('load',function(){ setTimeout(function(){
 $('#myModal').modal('show');
 }, 10000);
 
 });
</script>

Categories: web designing

Written By : Web Development Institute