A simple, lightweight jQuery-based popup plugin to display any kind of HTML data (contact forms, alert messages, iframes, etc.) using AJAX or inline content.
This plugin is designed to be a footprint-free alternative to heavy plugins, giving you only the features you actually need.
- Lightweight: Minimal code for maximum performance.
- Versatile: Supports AJAX, Inline HTML, and Iframes.
- Customizable: Set width, height, titles, and overlays via parameters or data-attributes.
- Callbacks: Supports
beforeOpen,openComplete, andcloseCompleteevents.
Add the CSS in your <head> and the JS files before the closing </body> tag. This plugin requires jQuery.
<linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/LearnCodeWeb/lightWeightPopup@v-0.5/css/lightWeightPopup.min.css" type="text/css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/gh/LearnCodeWeb/lightWeightPopup@v-0.5/js/lightWeightPopup.min.js"></script>You can trigger the popup using buttons or anchor tags. Use data-attributes for quick configuration.
<buttontype="button" class="btn btn-primary open-popup" data-href="contact-us.html" data-content="ajax">
Open Ajax Form
</button><buttontype="button" id="inline" class="btn btn-danger" data-content="inline">
Click for Inline Content
</button><buttontype="button" id="iframe" data-href="[https://www.youtube.com/embed/ZwKhufmMxko](https://www.youtube.com/embed/ZwKhufmMxko)" data-content="iframe">
Open Video
</button>Initialize the plugin in your custom script:
$(document).ready(function(e){$('.open-popup').lightWeightPopup({title: 'Popup Title',width: '500px',top: '50',overlay: true,type: 'ajax',beforeOpen: function(){console.log('Opening...');},openComplete: function(){console.log('Opened!');}});// Basic Ajax Call$('#popup').lightWeightPopup({type: 'ajax',href: 'contact-us.html',width: '90%',maxWidth: '600px'});});| Option | Description | Data Attribute |
|---|---|---|
href | URL for Ajax or Iframe | data-href |
width | Popup width (px or %) | data-width |
height | Popup height | data-height |
maxWidth | Maximum width | data-maxWidth |
title | Title of the modal | data-title |
overlay | Close on background click (default: false) | data-overlay |
modelFixed | Fix model at the top | data-model-fixed |
If you are using Bootstrap 4, you can use this structure inside your Ajax-loaded file (contact-us.html):
<divclass="p-3"><formmethod="post"><divclass="form-group"><label>First Name</label><inputtype="text" name="fname" class="form-control" placeholder="Enter first name"></div><divclass="form-group"><label>Email</label><inputtype="email" name="email" class="form-control" placeholder="Enter email"></div><divclass="form-group"><label>Message</label><textarearows="5" name="message" class="form-control" placeholder="Write here..."></textarea></div><buttontype="button" class="btn btn-danger">Submit</button></form></div>Zaid Bin Khalid
This project is open-source. Please feel free to use and modify it for your projects.