jquery popup onload

Popup Modal is widely used in ecommerce sites to display featured products or latest offers while most of the blog sites use it for user registration or subscription. It's quite easy to embed on your site. The only thing you require is the understanding of the bootstrap modal.

If you don't know much about it, you can go to Bootstrap Tabs and Panels section for detailed instruction about it.

Lets create a modal then. Keep in mind you'll need to add the links to jquery.js and bootstrap.js files in your web page for this to function.

<div id="popupmodal" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Pop Up Model</h4>
      </div>
      <div class="modal-body">
        <p>This is the pop upmodel that'll be added on your webpage.</p>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>  

tabindex="-1" will allow the user to close the popup box using the Esc key on their keyboard.

So, the modal is done and we don't have a button to trigger the modal and we don't need it too. Insted, we'll add a jquery script that'll trigger this modal on page load that means the page load will be the event to trigger this modal.

<script>
	 $(window).load(function(){
        $('#popupmodal').modal('show');
     });
 </script>	

Once the page is loaded, the modal with id popupmodal will be triggered. That's it enjoy.

0 Like 0 Dislike 0 Comment Share Tweet