Tiny Any Content Modal Window - lightWeightPopup.js

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.