jQuery Plugin To Create Fullscreen Popup Windows
| File Size: | 10.6 KB |
|---|---|
| Views Total: | 31470 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A super simple jQuery plugin which allows you to display a fullscreen popup window as well as locking the document scroll.
How to use it:
1. Load the jquery.fullscreen-popup.js after jQuery library in your document.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="jquery.fullscreen-popup.js"></script>
2. Create an element to trigger a fullscreen popup window.
<a class="open-popup" href="#popup">Open popup</a> <button class="open-popup" data-popup="#popup2">Open popup 2</button>
3. Wrap the popup content in a container with an unique ID corresponding to the href or data-popup value assigned in the previous step.
<div id="popup" style="display: none; width: 640px"> ... </div> <div id="popup2" style="display: none; width: 640px"> ... </div>
4. Call the plugin on the trigger elements.
$(function() {
$(".open-popup").fullScreenPopup({
// Options
});
});
5. All the default options.
bgColor: "#fff", inlineStyles: true, lockDocumentScroll: true, animationSpeed: 200
This awesome jQuery plugin is developed by nurislamov. For more Advanced Usages, please check the demo page or visit the official website.











