cookie modal overlay - Free Download Cookie-controlled Fullscreen Modal - jQuery Simple Overlay

Free Download Cookie-controlled Fullscreen Modal – jQuery Simple Overlay

By Posted on

This time I will share jQuery Plugin and tutorial about Cookie-controlled Fullscreen Modal – jQuery Simple Overlay, hope it will help you in programming stack.

cookie modal overlay - Free Download Cookie-controlled Fullscreen Modal - jQuery Simple Overlay
File Size: 14.3 KB
Views Total: 983
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

The Simple Overlay jQuery plugin helps you create a user-friendly fullscreen modal popup that uses cookies to remember the close.

It means that the modal popup won’t redisplay until the cookie expires or is cleared from the browser.

More Features:

  • Custom background image of the overlay.
  • Custom modal content. HTML content is supported as well.
  • Dark & Light themes.
  • Allows you to reset the overlay state.
  • Custom cookie settings.
  • Allows you to open/close the overlay manually.

How to use it:

1. Include jQuery library, simple-overlay.min.css, and simple-overlay.min.js on the web page.

view source
1 <link href="/path/to/css/simple-overlay.css" rel="stylesheet" />
2 <script src="/path/to/cdn/jquery.min.js"></script>
3 <script src="/path/to/js/simple-overlay.js"></script>

2. Create a modal popup and define your content in the content option:

view source
1 $('body').simpleOverlay({
2   content: '<a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a> Content Here'
3 });

3. Or load content from an inline element as follows:

view source
1 <div id="simple-overlay" class="simple-overlay background-image">
2   <div class="simple-container">Modal Content Here</div>
3   <button type="button" class="close" aria-label="Close">
4     <span aria-hidden="true">×</span>
5   </button>
6 </div>
view source
1 $('body').simpleOverlay({
2   attach: false
3 });

4. Determine the popup expiry time. Default: 30 days.

view source
1 $('body').simpleOverlay({
2   cookie: {
3     name: 'simple-overlay',
4     expiry: 30
5   }
6 });

5. Determine the popup expiry time. Default: 30 days.

view source
1 $('body').simpleOverlay({
2   cookie: {
3     name: 'simple-overlay',
4     expiry: 30
5   }
6 });

6. Switch to the Light theme.

view source
1 $('body').simpleOverlay({
2   style: 'white'
3 });

7. Reset the overlay state by increasing the revision. Default: 0.

view source
1 $('body').simpleOverlay({
2   revision: 1
3 });

8. Add a background image to the overlay.

view source
1 $('body').simpleOverlay({
2   background: '1.jpg'
3 });

9. More configuration options.

view source
01 $('body').simpleOverlay({
02  
03   // open on init
04   openOnInit: true,
05  
06   // check cookies before option
07   checkOnInit: true,
08  
09   // close with ESC key
10   closeOnEsc: true,
11  
12   // container that holds the modal popup
13   containerId: 'simple-overlay',
14  
15   // container that holds the content
16   contentContainerClass: 'simple-container',
17  
18   // container that holds the close button
19   hideClass: 'simple-hide',
20  
21   clickEvents: {
22     open: [], // selectors used for click events that cookie-dependent open the overlay.
23     alwaysOpen: [], // selectors used for click events that always open the overlay
24     close: [] // selectors used for click events that close the overlay
25   }
26    
27 });

10. Callback functions.

view source
01 $('body').simpleOverlay({
02  
03   // add custom trigger events
04   triggerCustom: function() {},
05  
06   // before container attached
07   beforeAttachContainer: function() {},
08  
09   // before overlay shown
10   beforeOverlayOpen: function() {},
11  
12   // before overlay hidden
13   beforeOverlayClose: function() {},
14  
15   // before cookie set
16   beforeSetCookie: function() {},
17  
18   // before cookie retrieved
19   beforeGetCookie: function() {},
20  
21   // after container attached
22   afterAttachContainer: function() {},
23  
24   // after overlay shown
25   afterOverlayOpen: function() {},
26  
27   // after overlay hidden
28   afterOverlayClose: function() {},
29  
30   // after cookie set
31   afterSetCookie: function() {},
32  
33   // after cookie retrieved
34   afterGetCookie: function() {},
35  
36 });

Changelog:

v1.0.3 (05/06/2020)

  • Added Close On ESC parameter

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

File Size: 40.4 KB
Views Total: 3316
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Related posts: