Display Content In A Fullscreen Overlay - jquery-overlay.js

A minimal overlay system built with jQuery that displays any content in a fullscreen overlay covering the whole page.

How to use it:

1. Place the minified version of the jquery-overlay.js plugin after jQuery.

<script src="https://code.jquery.com/jquery-3.4.1.js" 
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" 
        crossorigin="anonymous">
</script>
<script src="jquery-overlay-min.js"></script>

2. Initialize the overlay plugin and override the default settings as follows:

$(document).ready(function() {
  if (overlay) {
    
    // enable fade animations
    overlay.settings.fade.enabled = true;

    // fade in/out speed
    overlay.settings.fade.inSpeed = 'slow';
    overlay.settings.fade.outSpeed = 'slow';

    // enable auto dismiss
    overlay.settings.timer.enabled = false;

    // auto dismiss after 3 seconds
    overlay.settings.timer.duration = 3000;

    // Init
    overlay.init();
    
  }
});

3. Display any content in the overlay.

overlay.show('Hello World!');

4. Close the overlay manually.

overlay.hide();

5. Override the default styles of the overlay & content.

overlay.elements.style.overlay = 'z-index: 2; position: fixed; display: block; width: 100%; height: 100%; top 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8);';
overlay.elements.style.message = 'color: White; font-size: 5em; font-weight: bold; position: absolute; bottom: 0px; margin: 1em;';

---

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