jQuery Plugin To Create Fullscreen Popup Windows

File Size: 10.6 KB
Views Total: 31378
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Fullscreen Popup Windows

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.