This time I will share jQuery Plugin and tutorial about Cross-browser Modal Window With Semantic Template – jQuery Goodpopup, hope it will help you in programming stack.
| File Size: | 1.93 MB |
|---|---|
| Views Total: | 1146 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Goodpopup is a lightweight and cross-browser jQuery popup plugin which lets you create easy-to-style modal windows with semantic templates based on the handlebars.js templating library.
Basic usage:
1. Load the necessary jQuery and handlebars.js (OPTIONAL) libraries in the html page.
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> |
2 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script> |
2. Load the Goodpopup plugin’s JavaScript and Stylesheet in the page.
1 |
<link href="jquery.goodpopup/css/style.min.css" rel="stylesheet"> |
2 |
<script src="jquery.goodpopup/js/script.min.js"></script> |
3. Put your own templates (modal content) in the <script> tag. You can pass the options to the modal windows using the data-OPTION attributes as these:
01 |
<script id="demo-popup" type="text/x-handlebars-template"> |
02 |
<div class="popup"> |
03 |
<h1 class="popup__header">Popup Title</h1> |
04 |
</div> |
05 |
</script> |
06 |
07 |
<script id="demo-popup" type="text/x-handlebars-template" data-is-prerendered="true" data-is-outer-click-closing="false"> |
08 |
<img src="1.jpg" alt=""> |
09 |
</script> |
10 |
11 |
<script id="demo-popup" type="text/x-handlebars-template" data-is-prerendered="true" data-is-iframe="true" data-key-code-for-closing="false"> |
12 |
<iframe frameborder="0" allowtransparency="true" scrolling="no" src="1.html"></iframe> |
13 |
</script> |
4. Or create the modal content in a DOM node (without the need of Handlebars.js).
1 |
<div class="template" id="demo-popup"> |
2 |
<a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a> Content here |
3 |
</div> |
5. The JavaScript to launch the modal windows.
1 |
$.goodpopup.getPopup("demo-popup").open(); |
6. Override the default options to customize the modal windows.
01 |
const myPopup = $.goodpopup.getPopup("demo-popup") |
02 |
03 |
myPopup.setOptions({ |
04 |
05 |
// is pre-rendered |
06 |
isPrerendered: false, |
07 |
08 |
// content is an iframe |
09 |
isIframe: false, |
10 |
11 |
// saves the content when hidden |
12 |
isDetachable: false, |
13 |
14 |
// closes the modal by clicking outside |
15 |
isOuterClickClosing: true, |
16 |
17 |
// is full width |
18 |
isFullWidth: false, |
19 |
20 |
// shows close button |
21 |
hasCloseButton: true, |
22 |
23 |
// close the modal with ESC key |
24 |
keyCodeForClosing: [27], |
25 |
26 |
// forces closing |
27 |
forceClosing: { |
28 |
click: true, |
29 |
keydown: true, |
30 |
button: false |
31 |
}, |
32 |
33 |
// Handlebars allows you to use an object with data for additional flexibility when rendering a template |
34 |
data: {} |
35 |
|
36 |
}) |
7. Callback functions.
1 |
myPopup.setOptions({ |
2 |
3 |
callbackBeforeOpen: function() {}, |
4 |
callbackAfterOpen: function() {}, |
5 |
6 |
callbackBeforeClose: function() {}, |
7 |
callbackAfterClose: function() {}, |
8 |
|
9 |
}) |
8. API methods.
01 |
// open the modal |
02 |
myPopup.open() |
03 |
04 |
// close the modal |
05 |
myPopup.close(true) |
06 |
07 |
// detect if is rendered |
08 |
myPopup.isRendered() |
09 |
10 |
// detect if is hidden |
11 |
myPopup.isHidden() |
12 |
13 |
// set options |
14 |
myPopup.setOptions({}) |
15 |
16 |
// get options |
17 |
myPopup.getOptions() |
18 |
19 |
// get content from the modal |
20 |
myPopup.getPopupContent() |
21 |
22 |
// get modal ID |
23 |
myPopup.getPopupId() |
Changelog:
2021-02-28
- 2.0.0-beta.20: Refactor
2018-08-15
- 2.0.0-beta.19: Refactor
