Modal Window Template jQuery Goodpopup - Free Download Cross-browser Modal Window With Semantic Template - jQuery Goodpopup

Free Download Cross-browser Modal Window With Semantic Template – jQuery Goodpopup

Posted on

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.

Modal Window Template jQuery Goodpopup - Free Download Cross-browser Modal Window With Semantic Template - jQuery Goodpopup
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.

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