How to Open Bootstrap Modal Box after few seconds

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

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 20 Days

Crash : 7 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 7 Month

Fastrack : 4 Month

Crash : 2 Month

Request For Demo