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.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LearnCodeWeb/lightWeightPopup@v-0.5/css/lightWeightPopup.min.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="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.
<button type="button" class="btn btn-primary open-popup" data-href="contact-us.html" data-content="ajax">
Open Ajax Form
</button>
<button type="button" id="inline" class="btn btn-danger" data-content="inline">
Click for Inline Content
</button>
<button type="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):
<div class="p-3">
<form method="post">
<div class="form-group">
<label>First Name</label>
<input type="text" name="fname" class="form-control" placeholder="Enter first name">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<label>Message</label>
<textarea rows="5" name="message" class="form-control" placeholder="Write here..."></textarea>
</div>
<button type="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.