Auto Open A Modal After A Specific Timeout - jQuery timeoutModal

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

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.