Display Content In A Fullscreen Overlay - jquery-overlay.js
File Size: | 4.62 KB |
---|---|
Views Total: | 802 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.