webcimes-modal 1.0.1
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/.eslintrc.json +15 -0
- package/LICENSE.md +21 -0
- package/README.md +247 -0
- package/demo.html +102 -0
- package/demo_test.html +0 -0
- package/images/times.svg +1 -0
- package/package.json +28 -0
- package/tsconfig.json +13 -0
- package/webcimes-modal.css +415 -0
- package/webcimes-modal.js +353 -0
- package/webcimes-modal.js.map +1 -0
- package/webcimes-modal.ts +502 -0
package/.eslintrc.json
ADDED
package/LICENSE.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 WebCimes - RICHARD Florian (https://webcimes.com)
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
# webcimes-modal
|
|
2
|
+
|
|
3
|
+
Create and animate modals simply, you can use multiple modals at the same time, create alert or confirm modal with buttons, move modals, set title, set body, etc.. It works with vanilla javascript + html + css.
|
|
4
|
+
|
|
5
|
+
Once the `webcimes-modal` javascript is defined, we can simply call the WebcimesModal class with the desired options.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
Use the npm package manager to install webcimes-modal.
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install webcimes-modal
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### ESM
|
|
16
|
+
Compared to JS bundlers (like Webpack), using ESM in the browser requires you to use the full path and filename instead of the module name.
|
|
17
|
+
You can use an importmap to resolve the arbitrary module names to complete paths (not needed if you use JS bundlers):
|
|
18
|
+
```html
|
|
19
|
+
<html>
|
|
20
|
+
<head>
|
|
21
|
+
...
|
|
22
|
+
<script type="importmap">
|
|
23
|
+
{
|
|
24
|
+
"imports": {
|
|
25
|
+
"webcimes-modal": "./node_modules/webcimes-modal/webcimes-modal.js"
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
</script>
|
|
29
|
+
</head>
|
|
30
|
+
...
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Usage
|
|
34
|
+
|
|
35
|
+
### Import stylesheet:
|
|
36
|
+
```html
|
|
37
|
+
<link rel="stylesheet" href="./node_modules/webcimes-modal/webcimes-modal.css">
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Import javascript module:
|
|
41
|
+
```javascript
|
|
42
|
+
import { WebcimesModal } from "webcimes-modal";
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Call `WebcimesModal` for create modal:
|
|
46
|
+
```javascript
|
|
47
|
+
// Wait for dom content loaded or call WebcimesModal before the end of body
|
|
48
|
+
document.addEventListener("DOMContentLoaded", function()
|
|
49
|
+
{
|
|
50
|
+
// Create modal
|
|
51
|
+
const modal = new WebcimesModal({
|
|
52
|
+
setId: null, // set a specific id on the modal. default "null"
|
|
53
|
+
setClass: null, // set a specific class on the modal, default "null"
|
|
54
|
+
width: 'auto', // width (specify unit), default "auto"
|
|
55
|
+
height: 'auto', // height (specify unit), default "auto"
|
|
56
|
+
titleHtml: "My title", // html for title, default "null"
|
|
57
|
+
bodyHtml: "My Body", // html for body, default "null"
|
|
58
|
+
buttonCancelHtml: "Cancel", // html for cancel button, default "null"
|
|
59
|
+
buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
|
|
60
|
+
closeOnCancelButton: false, // close modal after trigger cancel button, default "true"
|
|
61
|
+
closeOnConfirmButton: true, // close modal after trigger confirm button, default "true"
|
|
62
|
+
showCloseButton: true, // show close button, default "true"
|
|
63
|
+
allowCloseOutside: false, // allow the modal to close when clicked outside, default "true"
|
|
64
|
+
allowMovement: true, // ability to move modal, default "true"
|
|
65
|
+
moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
|
|
66
|
+
moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
|
|
67
|
+
moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
|
|
68
|
+
stickyHeader: true, // keep header sticky (visible) when scrolling, default "true"
|
|
69
|
+
stickyFooter: true, // keep footer sticky (visible) when scrolling, default "true"
|
|
70
|
+
style: null, // add extra css style to modal, default null
|
|
71
|
+
animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for show animation, default "animDropDown"
|
|
72
|
+
animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp"
|
|
73
|
+
animationDuration: 500, // animation duration in ms, default "500"
|
|
74
|
+
beforeShow: () => {console.log("before show");}, // callback before show modal
|
|
75
|
+
afterShow: () => {console.log("after show");}, // callback after show modal
|
|
76
|
+
beforeDestroy: () => {console.log("before destroy");}, // callback before destroy modal
|
|
77
|
+
afterDestroy: () => {console.log("after destroy");}, // callback after destroy modal
|
|
78
|
+
onCancelButton: () => {console.log("on cancel button");}, // callback after triggering cancel button
|
|
79
|
+
onConfirmButton: () => {console.log("on confirm button");}, // callback after triggering confirm button
|
|
80
|
+
});
|
|
81
|
+
});
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Modal html structure:
|
|
85
|
+
After a creating a modal, the basic html structure look like this:
|
|
86
|
+
|
|
87
|
+
```html
|
|
88
|
+
<div class="modal">
|
|
89
|
+
<div class="modalHeader">
|
|
90
|
+
<div class="title">My title</div>
|
|
91
|
+
<button class="close"></button>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="modalBody">
|
|
94
|
+
My body
|
|
95
|
+
</div>
|
|
96
|
+
<div class="modalFooter">
|
|
97
|
+
<button class="cancel">Cancel</button>
|
|
98
|
+
<button class="confirm ">Confirm</button>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Set basic parameter on the modal:
|
|
104
|
+
All parameters are optionnal, but to set the base message on the modal you can use `titleHtml` to create the title, `bodyHtml` contain the main message of the modal, and `buttonCancelHtml` & `buttonConfirmHtml` contain the html for each button.
|
|
105
|
+
|
|
106
|
+
For these 4 fields you can just directly write the text or define tags, or call html from an element like this :
|
|
107
|
+
|
|
108
|
+
```javascript
|
|
109
|
+
const modal = new WebcimesModal({
|
|
110
|
+
titleHtml: "My title <span style='color:red'>with red color</span>", // directly put an html tag or attribute like span and style
|
|
111
|
+
bodyHtml: document.querySelector("#myID").outerHTML, // set html from an HTML element
|
|
112
|
+
buttonCancelHtml: "Cancel <img src='my-url' alt=''>", // put the img tag
|
|
113
|
+
buttonConfirmHtml: "Confirm", // or just text
|
|
114
|
+
});
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
if any of these 4 fields is set to null (the default), it will not appear on the modal
|
|
118
|
+
|
|
119
|
+
### Remove specific structure of the modal:
|
|
120
|
+
If you want to completely remove `modalHeader`, `modalBody` or `modalFooter` you need:
|
|
121
|
+
|
|
122
|
+
To remove `modalHeader`: set `titleHtml` to `null` and `showCloseButton` to `false`
|
|
123
|
+
|
|
124
|
+
To remove `modalBody`: set `bodyHtml` to `null`
|
|
125
|
+
|
|
126
|
+
To remove `modalFooter`: set `buttonCancelHtml` to `null` and `buttonConfirmHtml` to `null`
|
|
127
|
+
|
|
128
|
+
### Scale the modal:
|
|
129
|
+
By default the `height` and `width` are set to `auto`, the modal will also be sized according to the html content.
|
|
130
|
+
|
|
131
|
+
You can also set the determined `height` or `width` by indicating the value with a number and a unit.
|
|
132
|
+
|
|
133
|
+
```javascript
|
|
134
|
+
const modal = new WebcimesModal({
|
|
135
|
+
width: '80vm',
|
|
136
|
+
height: '200px',
|
|
137
|
+
});
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### Modal behavior:
|
|
141
|
+
Below are the different options for customize the modal behavior.
|
|
142
|
+
|
|
143
|
+
```javascript
|
|
144
|
+
const modal = new WebcimesModal({
|
|
145
|
+
closeOnCancelButton: false, // close modal after triggering cancel button, default "true"
|
|
146
|
+
closeOnConfirmButton: false, // close modal after triggering confirm button, default "true"
|
|
147
|
+
showCloseButton: true, // show close button, default "true"
|
|
148
|
+
allowCloseOutside: false, // allows the modal to close when clicked outside, default "true"
|
|
149
|
+
allowMovement: true, // ability to move modal, default "true"
|
|
150
|
+
moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
|
|
151
|
+
moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
|
|
152
|
+
moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
|
|
153
|
+
stickyHeader: true, // keep header sticky (visible) when scrolling, default "true"
|
|
154
|
+
stickyFooter: true, // keep footer sticky (visible) when scrolling, default "true"
|
|
155
|
+
});
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### Add extra style to the modal:
|
|
159
|
+
You can define the style of the modal with `css`, but you can also use the style property which allows to directly add an additional style to the modal.
|
|
160
|
+
|
|
161
|
+
```javascript
|
|
162
|
+
const modal = new WebcimesModal({
|
|
163
|
+
style: "background:black; color:#fff; text-align:center;",
|
|
164
|
+
});
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### Animation:
|
|
168
|
+
Once the modal is created, it will be shown and hidden with an animation, you can choose between two animations for each case:
|
|
169
|
+
|
|
170
|
+
For `animationOnShow` you can choose between `animDropDown` or `animFadeIn`
|
|
171
|
+
|
|
172
|
+
For `animationOnDestroy` you can choose between `animDropUp` or `animFadeOut`
|
|
173
|
+
|
|
174
|
+
And you can set the duration of all animation by setting `animationDuration` with a number in ms.
|
|
175
|
+
|
|
176
|
+
```javascript
|
|
177
|
+
const modal = new WebcimesModal({
|
|
178
|
+
animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for show animation, default "animDropDown"
|
|
179
|
+
animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp"
|
|
180
|
+
animationDuration: 500, // anim duration in ms, default "500"
|
|
181
|
+
});
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
### Events:
|
|
185
|
+
Multiple events exist, which allow to interact with the modal at each step. You can use all events below:
|
|
186
|
+
|
|
187
|
+
```javascript
|
|
188
|
+
const modal = new WebcimesModal({
|
|
189
|
+
beforeShow: () => {console.log("before show");}, // callback before show modal
|
|
190
|
+
afterShow: () => {console.log("after show");}, // callback after show modal
|
|
191
|
+
beforeDestroy: () => {console.log("before destroy");}, // callback before destroy modal
|
|
192
|
+
afterDestroy: () => {console.log("after destroy");}, // callback after destroy modal
|
|
193
|
+
onCancelButton: () => {console.log("on cancel button");}, // callback after triggering cancel button
|
|
194
|
+
onConfirmButton: () => {console.log("on confirm button");}, // callback after triggering confirm button
|
|
195
|
+
});
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
### Destroy
|
|
199
|
+
To destroy the modal, you have several ways:
|
|
200
|
+
|
|
201
|
+
- You can use basic close button with `showCloseButton` property set to `true`
|
|
202
|
+
|
|
203
|
+
- Use `cancel` or `confirm` button with `closeOnCancelButton` or `closeOnConfirmButton` property set to `true`
|
|
204
|
+
|
|
205
|
+
- Add a custom button, and set its class to `close`
|
|
206
|
+
|
|
207
|
+
- Destroy the modal manually with the `destroy` method, like this:
|
|
208
|
+
|
|
209
|
+
```javascript
|
|
210
|
+
// Get the instance
|
|
211
|
+
const modal = new WebcimesModal(...);
|
|
212
|
+
|
|
213
|
+
// Things
|
|
214
|
+
|
|
215
|
+
// Then call the destroy method:
|
|
216
|
+
modal.destroy();
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
### Style modals:
|
|
220
|
+
You can style modal with the following field applying to the class of `.webcimesModals` (for background and z-index behind the modal) and `.webcimesModals > .modal` (for modal):
|
|
221
|
+
|
|
222
|
+
```css
|
|
223
|
+
.webcimesModals
|
|
224
|
+
{
|
|
225
|
+
--webcimes-modals-background: rgba(0,0,0,0.8);
|
|
226
|
+
--webcimes-modals-z-index: 5;
|
|
227
|
+
}
|
|
228
|
+
.webcimesModals > .modal
|
|
229
|
+
{
|
|
230
|
+
--modal-color: inherit;
|
|
231
|
+
--modal-background: #fff;
|
|
232
|
+
--modal-border-color: #ddd;
|
|
233
|
+
--modal-box-shadow: 1px 1px 3px 0px #444;
|
|
234
|
+
--modal-title-font-size: 24px;
|
|
235
|
+
--modal-button-cancel-background: rgba(102,102,102,1);
|
|
236
|
+
--modal-button-cancel-background-hover: rgba(102,102,102,0.7);
|
|
237
|
+
--modal-button-cancel-color: #fff;
|
|
238
|
+
--modal-button-cancel-color-hover: #fff;
|
|
239
|
+
--modal-button-confirm-background: rgba(0,0,0,1);
|
|
240
|
+
--modal-button-confirm-background-hover: rgba(0,0,0,0.7);
|
|
241
|
+
--modal-button-confirm-color: #fff;
|
|
242
|
+
--modal-button-confirm-color-hover: #fff;
|
|
243
|
+
}
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
## License
|
|
247
|
+
[MIT](https://choosealicense.com/licenses/mit/)
|
package/demo.html
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="Author" content="WebCimes">
|
|
6
|
+
<meta name="Copyright" content="© https://webcimes.com">
|
|
7
|
+
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
8
|
+
<title>Demo webcimes-modal</title>
|
|
9
|
+
<link rel="stylesheet" href="./webcimes-modal.css">
|
|
10
|
+
<script type="importmap">
|
|
11
|
+
{
|
|
12
|
+
"imports": {
|
|
13
|
+
"webcimes-modal": "./webcimes-modal.js"
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
</script>
|
|
17
|
+
<script type="module">
|
|
18
|
+
// Import webcimes-modal
|
|
19
|
+
import {WebcimesModal} from "webcimes-modal";
|
|
20
|
+
|
|
21
|
+
// Wait for dom content loaded
|
|
22
|
+
document.addEventListener("DOMContentLoaded", function()
|
|
23
|
+
{
|
|
24
|
+
const modal = new WebcimesModal({
|
|
25
|
+
setId: null, // set specific id to the modal, default "null"
|
|
26
|
+
setClass: null, // set specific class to the modal, default "null"
|
|
27
|
+
width: 'auto', // width (specify the unit), default "auto"
|
|
28
|
+
height: 'auto', // height (specify the unit), default "auto"
|
|
29
|
+
titleHtml: "My title", // html for title, default "null"
|
|
30
|
+
bodyHtml: "My Body", // html for body, default "null"
|
|
31
|
+
buttonCancelHtml: "Cancel", // html for cancel button, default "null"
|
|
32
|
+
buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
|
|
33
|
+
closeOnCancelButton: true, // close the modal after trigger cancel button, default "true"
|
|
34
|
+
closeOnConfirmButton: true, // close the modal after trigger confirm button, default "true"
|
|
35
|
+
showCloseButton: true, // show the close button, default "true"
|
|
36
|
+
allowCloseOutside: false, // allow to close modal when click outside, default "true"
|
|
37
|
+
allowMovement: true, // possibility to move the modal, default "true"
|
|
38
|
+
moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
|
|
39
|
+
moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
|
|
40
|
+
moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
|
|
41
|
+
stickyHeader: true, // keep sticky (visible) the header when scrolling, default "true"
|
|
42
|
+
stickyFooter: true, // keep sticky (visible) the footer when scrolling, default "true"
|
|
43
|
+
style: null, // add extra style css to the modal, default null
|
|
44
|
+
animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for enter animation, default "animDropDown"
|
|
45
|
+
animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for end animation, default "animDropUp"
|
|
46
|
+
animationDuration: 500, // anim duration in ms, default "500"
|
|
47
|
+
beforeShow: () => {console.log("before show");}, // callback before show modal
|
|
48
|
+
afterShow: () => {console.log("after show");}, // callback after destroy modal
|
|
49
|
+
beforeDestroy: () => {console.log("before destroy");}, // callback before destroy modal
|
|
50
|
+
afterDestroy: () => {console.log("after destroy");}, // callback after destroy modal
|
|
51
|
+
onCancelButton: () => {console.log("on cancel button");}, // callback after trigger cancel button
|
|
52
|
+
onConfirmButton: () => {console.log("on confirm button");}, // callback after trigger confirm button
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
const modal2 = new WebcimesModal({
|
|
56
|
+
titleHtml: "My title", // html for title, default "null"
|
|
57
|
+
bodyHtml: document.querySelector(".test").outerHTML, // html for body, default "null"
|
|
58
|
+
buttonCancelHtml: "Cancel", // html for cancel button, default "null"
|
|
59
|
+
buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
|
|
60
|
+
closeOnConfirmButton: false, // close the modal after trigger confirm button, default "true"
|
|
61
|
+
onConfirmButton: () => {modal2.destroy();}, // callback after trigger confirm button
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
</script>
|
|
65
|
+
</head>
|
|
66
|
+
<body>
|
|
67
|
+
<div style="display:none;">
|
|
68
|
+
<div class="test">
|
|
69
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
70
|
+
<br>
|
|
71
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
72
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
73
|
+
<br>
|
|
74
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
75
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
76
|
+
<br>
|
|
77
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
78
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
79
|
+
<br>
|
|
80
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
81
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
82
|
+
<br>
|
|
83
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
84
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
85
|
+
<br>
|
|
86
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
87
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
88
|
+
<br>
|
|
89
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
90
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
91
|
+
<br>
|
|
92
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
93
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
94
|
+
<br>
|
|
95
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
96
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
97
|
+
<br>
|
|
98
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
</body>
|
|
102
|
+
</html>
|
package/demo_test.html
ADDED
|
File without changes
|
package/images/times.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
|
package/package.json
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "webcimes-modal",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Simply create and animate modals. It works with vanilla javascript + html + css.",
|
|
5
|
+
"main": "webcimes-modal.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
+
},
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/WebCimes/webcimes-modal.git"
|
|
12
|
+
},
|
|
13
|
+
"author": "WebCimes",
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"keywords": [
|
|
16
|
+
"modal",
|
|
17
|
+
"multiple modals",
|
|
18
|
+
"alert",
|
|
19
|
+
"confirm",
|
|
20
|
+
"popup",
|
|
21
|
+
"javascript",
|
|
22
|
+
"vanilla javascript"
|
|
23
|
+
],
|
|
24
|
+
"bugs": {
|
|
25
|
+
"url": "https://github.com/WebCimes/webcimes-modal/issues"
|
|
26
|
+
},
|
|
27
|
+
"homepage": "https://github.com/WebCimes/webcimes-modal#readme"
|
|
28
|
+
}
|