Skip to content

Commit 87bc85e

Browse files
mianzaidmianzaid
authored
Update README.md
1 parent 98bdd5f commit 87bc85e

1 file changed

Lines changed: 127 additions & 13 deletions

File tree

‎README.md‎

Lines changed: 127 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,133 @@
1-
# How to create a custom popup form with JQuery
2-
Create a custom POPUP form with Jquery
1+
# LightWeightPopup (PHP & Ajax Custom Popup)
32

4-
Can add by CDN
3+
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.
54

6-
*JS*
7-
````
8-
https://cdn.jsdelivr.net/gh/LearnCodeWeb/lightWeightPopup@v-0.5/js/lightWeightPopup.min.js
9-
````
10-
*CSS*
11-
````
12-
https://cdn.jsdelivr.net/gh/LearnCodeWeb/lightWeightPopup@v-0.5/css/lightWeightPopup.min.css
13-
````
5+
This plugin is designed to be a footprint-free alternative to heavy plugins, giving you only the features you actually need.
146

7+
## 🚀 Features
8+
* **Lightweight:** Minimal code for maximum performance.
9+
* **Versatile:** Supports AJAX, Inline HTML, and Iframes.
10+
* **Customizable:** Set width, height, titles, and overlays via parameters or data-attributes.
11+
* **Callbacks:** Supports `beforeOpen`, `openComplete`, and `closeComplete` events.
1512

16-
For complete documentation <a href="https://learncodeweb.com/web-development/how-to-create-a-custom-popup-form-with-php-and-ajax/" target="_blank">click here</a>
13+
---
1714

15+
## 🛠 Installation
1816

19-
For demo <a href="https://learncodeweb.github.io/lightWeightPopup/" target="_blank">click here</a>
17+
### 1. Include Stylesheet & Scripts
18+
Add the CSS in your `<head>` and the JS files before the closing `</body>` tag. This plugin requires jQuery.
19+
20+
```html
21+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LearnCodeWeb/lightWeightPopup@v-0.5/css/lightWeightPopup.min.css" type="text/css">
22+
23+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
24+
<script src="https://cdn.jsdelivr.net/gh/LearnCodeWeb/lightWeightPopup@v-0.5/js/lightWeightPopup.min.js"></script>
25+
```
26+
27+
---
28+
29+
## 📖 How to Use
30+
31+
### HTML Structure
32+
You can trigger the popup using buttons or anchor tags. Use `data-attributes` for quick configuration.
33+
34+
```html
35+
<button type="button" class="btn btn-primary open-popup" data-href="contact-us.html" data-content="ajax">
36+
Open Ajax Form
37+
</button>
38+
39+
<button type="button" id="inline" class="btn btn-danger" data-content="inline">
40+
Click for Inline Content
41+
</button>
42+
43+
<button type="button" id="iframe" data-href="[https://www.youtube.com/embed/ZwKhufmMxko](https://www.youtube.com/embed/ZwKhufmMxko)" data-content="iframe">
44+
Open Video
45+
</button>
46+
```
47+
48+
### Plugin Initialization
49+
Initialize the plugin in your custom script:
50+
51+
```javascript
52+
$(document).ready(function (e) {
53+
$('.open-popup').lightWeightPopup({
54+
title: 'Popup Title',
55+
width: '500px',
56+
top: '50',
57+
overlay: true,
58+
type: 'ajax',
59+
beforeOpen: function () {
60+
console.log('Opening...');
61+
},
62+
openComplete: function () {
63+
console.log('Opened!');
64+
}
65+
});
66+
67+
// Basic Ajax Call
68+
$('#popup').lightWeightPopup({
69+
type: 'ajax',
70+
href: 'contact-us.html',
71+
width: '90%',
72+
maxWidth: '600px'
73+
});
74+
});
75+
```
76+
77+
---
78+
79+
## ⚙️ Parameters (Options)
80+
81+
| Option | Description | Data Attribute |
82+
| :--- | :--- | :--- |
83+
| `href` | URL for Ajax or Iframe | `data-href` |
84+
| `width` | Popup width (px or %) | `data-width` |
85+
| `height` | Popup height | `data-height` |
86+
| `maxWidth` | Maximum width | `data-maxWidth` |
87+
| `title` | Title of the modal | `data-title` |
88+
| `overlay` | Close on background click (default: false) | `data-overlay` |
89+
| `modelFixed` | Fix model at the top | `data-model-fixed` |
90+
91+
---
92+
93+
## 📝 Example Contact Form (HTML)
94+
If you are using **Bootstrap 4**, you can use this structure inside your Ajax-loaded file (`contact-us.html`):
95+
96+
```html
97+
<div class="p-3">
98+
<form method="post">
99+
<div class="form-group">
100+
<label>First Name</label>
101+
<input type="text" name="fname" class="form-control" placeholder="Enter first name">
102+
</div>
103+
<div class="form-group">
104+
<label>Email</label>
105+
<input type="email" name="email" class="form-control" placeholder="Enter email">
106+
</div>
107+
<div class="form-group">
108+
<label>Message</label>
109+
<textarea rows="5" name="message" class="form-control" placeholder="Write here..."></textarea>
110+
</div>
111+
<button type="button" class="btn btn-danger">Submit</button>
112+
</form>
113+
</div>
114+
```
115+
116+
---
117+
118+
## 👨‍💻 Author
119+
**Zaid Bin Khalid**
120+
121+
---
122+
123+
## 📄 License
124+
This project is open-source. Please feel free to use and modify it for your projects.
125+
```
126+
127+
### Is README mein maine kya shamil kiya?
128+
1. **Badges & Icons:** Taaki look professional lage.
129+
2. **Tables:** Parameters ko samajhne ke liye clear table banai.
130+
3. **Code Highlighting:** Markdown ke backticks (```) use kiye hain taaki code copy-paste karne mein asaani ho.
131+
4. **Sections:** Installation se lekar Author info tak sab kuch divide kar diya hai.
132+
133+
Bas is poore text ko copy karein aur apni `README.md` file mein save kar den!

0 commit comments

Comments
 (0)