Auto Open A Modal After A Specific Timeout - jQuery timeoutModal

Auto Open A Modal After A Specific Timeout - jQuery timeoutModal
File Size: 6.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

timeoutModal is a jQuery plugin to create a customizable, cookie-enabled modal popup that automatically reveals after a timeout you specify.

The timeout modal is dismissible, and stays dismissed for 24 hours (based on the cookies).

Ideal for session timeout warning, user idle alert and more.

How to use it:

1. Include the necessary jQuery library and jQuery cookies plugin on the web page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

2. Build the html for the timeout modal.

<div class="timeoutPopup timeoutPopup_hidden" id="timeoutPopup">
  <div class="timeoutPopup__wrapper">
    <div class="timeoutPopup__close"></div>
    <div class="timeoutPopup__content">
      ...
      Modal Content Here
      ...
    </div>
  </div>
</div>

3. That's it. The modal will auto reveal after 10 seconds when the page is completely loaded. To override the default timeout, follow this step:

// 10 seconds
var openTimeoutPopup = new TimeoutPopup('#timeoutPopup', 10);

// init
openTimeoutPopup.init();

This awesome jQuery plugin is developed by Yorgigiri. For more Advanced Usages, please check the demo page or visit the official website.