Minimal Static Modal Popup Plugin - jQuery layerPopup
File Size: | 5.08 KB |
---|---|
Views Total: | 892 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

layerPopup is a minimal, Bootstrap compatible Popup plugin for jQuery that allows you to display static web content in a modal dialog with support for background overlay and open/close callbacks. You can close the modal popup by pressing the close button or clicking anywhere on the background overlay.
How to use it:
1. Insert the jQuery layerPopup's JavaScript jquery.sh-layer-popup.js
after the latest jQuery library but before the closing body
tag.
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"> </script> <script src="jquery.sh-layer-popup.js"></script>
2. Insert your content into the modal popup.
<!-- Basic --> <div id="dialog"> Content here </div> <!-- With a close link --> <div id="dialog"> Content here <a href="#" class="dialog-close">Close</a> </div>
3. Create a trigger element to launch the modal popup when needed.
<button type="button" class="dialog-open">Launch</button>
4. Call the function on the modal container and specify the selectors of launch/close elements. That's it.
$(function() { $("#dialog").shLayerPopup({ open: ".dialog-open", close: ".dialog-close" }); });
5. The plugin provides two callbacks which will be triggered when the modal popup is opened and closed.
$(function() { $("#dialog").shLayerPopup({ openevent : function() {}, closeevent : function() {} }); });
6. To hide the background overlay on modal open, follow this step:
$(function() { $("#dialog").shLayerPopup({ background: 'none' }); });
This awesome jQuery plugin is developed by exizt. For more Advanced Usages, please check the demo page or visit the official website.