engram-popup 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -6
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -9,21 +9,32 @@ Install the package via npm:
|
|
|
9
9
|
|
|
10
10
|
```bash
|
|
11
11
|
npm i engram-popup
|
|
12
|
+
```
|
|
13
|
+
|
|
12
14
|
Usage
|
|
15
|
+
|
|
13
16
|
1. Import the library
|
|
14
17
|
In your main JavaScript/TypeScript file:
|
|
15
18
|
|
|
16
|
-
|
|
19
|
+
```bash
|
|
17
20
|
// Import styles
|
|
18
21
|
import 'engram-popup/dist/index.css';
|
|
19
22
|
|
|
20
23
|
// Import JavaScript functionality
|
|
21
24
|
import { popup } from 'engram-popup';
|
|
25
|
+
|
|
26
|
+
//call popup function
|
|
27
|
+
popup();
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
|
|
22
31
|
2. Create a popup
|
|
23
32
|
Add a div element with the data-engram-popup attribute to your HTML:
|
|
24
33
|
|
|
25
|
-
|
|
34
|
+
```bash
|
|
26
35
|
<div class="your-popup-class" data-engram-popup="unique-popup-name"></div>
|
|
36
|
+
```
|
|
37
|
+
|
|
27
38
|
Important notes:
|
|
28
39
|
|
|
29
40
|
Use a unique value for the data-engram-popup attribute (e.g., login-popup, contact-form)
|
|
@@ -35,12 +46,15 @@ Add your own CSS class (like your-popup-class) to style the popup (dimensions, b
|
|
|
35
46
|
3. Create a trigger button
|
|
36
47
|
Add a button (or any other element) with the data-engram-button attribute:
|
|
37
48
|
|
|
38
|
-
|
|
49
|
+
```bash
|
|
39
50
|
<button data-engram-button="unique-popup-name">Open Popup</button>
|
|
51
|
+
```
|
|
52
|
+
|
|
40
53
|
The value of data-engram-button must match the value of the corresponding data-engram-popup attribute.
|
|
41
54
|
|
|
42
55
|
Complete Example
|
|
43
|
-
|
|
56
|
+
|
|
57
|
+
```bash
|
|
44
58
|
<!-- Trigger button -->
|
|
45
59
|
<button data-engram-button="test-popup">Open Modal</button>
|
|
46
60
|
|
|
@@ -49,10 +63,10 @@ html
|
|
|
49
63
|
<h2>Popup Content</h2>
|
|
50
64
|
<p>This is your custom popup content.</p>
|
|
51
65
|
</div>
|
|
52
|
-
|
|
66
|
+
```
|
|
53
67
|
Add your own CSS classes to customize the appearance of your popups:
|
|
54
68
|
|
|
55
|
-
|
|
69
|
+
```bash
|
|
56
70
|
.custom-popup-style {
|
|
57
71
|
width: 400px;
|
|
58
72
|
background: white;
|
|
@@ -60,6 +74,8 @@ css
|
|
|
60
74
|
border-radius: 8px;
|
|
61
75
|
/* Add your custom styles here */
|
|
62
76
|
}
|
|
77
|
+
```
|
|
78
|
+
|
|
63
79
|
Notes
|
|
64
80
|
You can add as many popups as needed on a single page
|
|
65
81
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "engram-popup",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"description": "A lightweight and dependency-free JavaScript library for creating popups and modals. Works via npm and CDN, and fits projects of any size — from simple landing pages to complex SPA applications.",
|
|
@@ -38,4 +38,4 @@
|
|
|
38
38
|
"type": "git",
|
|
39
39
|
"url": "https://github.com/psih2131/engram-popup.git"
|
|
40
40
|
}
|
|
41
|
-
}
|
|
41
|
+
}
|