Cookie-controlled Fullscreen Modal - jQuery Simple Overlay
File Size: | 14.3 KB |
---|---|
Views Total: | 1584 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.
<link href="/path/to/css/simple-overlay.css" rel="stylesheet" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/simple-overlay.js"></script>
2. Create a modal popup and define your content in the content
option:
$('body').simpleOverlay({ content: 'Modal Content Here' });
3. Or load content from an inline element as follows:
<div id="simple-overlay" class="simple-overlay background-image"> <div class="simple-container">Modal Content Here</div> <button type="button" class="close" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div>
$('body').simpleOverlay({ attach: false });
4. Determine the popup expiry time. Default: 30 days.
$('body').simpleOverlay({ cookie: { name: 'simple-overlay', expiry: 30 } });
5. Determine the popup expiry time. Default: 30 days.
$('body').simpleOverlay({ cookie: { name: 'simple-overlay', expiry: 30 } });
6. Switch to the Light theme.
$('body').simpleOverlay({ style: 'white' });
7. Reset the overlay state by increasing the revision. Default: 0.
$('body').simpleOverlay({ revision: 1 });
8. Add a background image to the overlay.
$('body').simpleOverlay({ background: '1.jpg' });
9. More configuration options.
$('body').simpleOverlay({ // open on init openOnInit: true, // check cookies before option checkOnInit: true, // close with ESC key closeOnEsc: true, // container that holds the modal popup containerId: 'simple-overlay', // container that holds the content contentContainerClass: 'simple-container', // container that holds the close button hideClass: 'simple-hide', clickEvents: { open: [], // selectors used for click events that cookie-dependent open the overlay. alwaysOpen: [], // selectors used for click events that always open the overlay close: [] // selectors used for click events that close the overlay } });
10. Callback functions.
$('body').simpleOverlay({ // add custom trigger events triggerCustom: function() {}, // before container attached beforeAttachContainer: function() {}, // before overlay shown beforeOverlayOpen: function() {}, // before overlay hidden beforeOverlayClose: function() {}, // before cookie set beforeSetCookie: function() {}, // before cookie retrieved beforeGetCookie: function() {}, // after container attached afterAttachContainer: function() {}, // after overlay shown afterOverlayOpen: function() {}, // after overlay hidden afterOverlayClose: function() {}, // after cookie set afterSetCookie: function() {}, // after cookie retrieved afterGetCookie: function() {}, });
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.