Cookie-controlled Fullscreen Modal - jQuery Simple Overlay

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.