jQuery Plugin To Create Fullscreen Popup Windows
File Size: | 10.6 KB |
---|---|
Views Total: | 31163 |
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.