Tiny Any Content Modal Window - lightWeightPopup.js
File Size: | 9.75 KB |
---|---|
Views Total: | 1040 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight and simple-to-implement jQuery modal popup plugin that supports almost all web content such as inline, AJAX, and iframe.
How to use it:
1. Add references to jQuery library and the lightWeightPopup.js jQuery plugin.
<link rel="stylesheet" href="/path/to/lightweightpopup.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/lightWeightPopup.js"></script>
2. Create a modal toggle button, determine the content type using the data-content
attribute, and specify the path to the content to be loaded in the modal using the data-href
attribute as follows:
<button id="example" data-href="external.html" data-content="ajax"> AJAX Modal </button> <button id="example" data-href="https://www.youtube.com/embed/VIDEO-ID" data-content="iframe"> Iframe Modal (Youtube) </button> <button id="example" data-content="inline"> Inline Modal </button> <div class="lwp-inline"> Inline Modal Content Here </div>
3. Initialize the plugin on the toggle button and done.
$("#example").lightWeightPopup({ // options here });
4. Config the modal window by passing the following parameters to the lightWeightPopup
function.
$("#example").lightWeightPopup({ // AJAX URL href: '/path/to/ajax/', // modal width width: '80%', // modal height height: '400px', // max width maxWidth: '960px', // max height maxHeight: '300px', // modal title title: 'Modal Title', // close the modal by clicking the background overlay overlay: true, // position fixed or not modelFixed: false, // top offset in pixels top: 20, });
5. You can also pass those parameters via data attributes in cases where you have multiple modal instances on a page.
<button id="example" data-href="external.html" data-content="ajax" data-width="80%" data-height="400px" data-maxWidth="960px" data-maxHeight="400px" data-title="Modal Title" data-overlay="true" data-model-fixed="false" data-top="20"> AJAX Modal </button>
This awesome jQuery plugin is developed by LearnCodeWeb. For more Advanced Usages, please check the demo page or visit the official website.