Cross-browser Modal Window With Semantic Template - jQuery Goodpopup

File Size: 1.93 MB
Views Total: 1819
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Cross-browser Modal Window With Semantic Template - jQuery Goodpopup

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.

<script src=""></script>
<script src=""></script>

2. Load the Goodpopup plugin's JavaScript and Stylesheet in the page.

<link href="jquery.goodpopup/css/style.min.css" rel="stylesheet">
<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:

<script id="demo-popup" type="text/x-handlebars-template">
  <div class="popup">
    <h1 class="popup__header">Popup Title</h1>

<script id="demo-popup" type="text/x-handlebars-template" data-is-prerendered="true" data-is-outer-click-closing="false">
  <img src="1.jpg" alt="">

<script id="demo-popup" type="text/x-handlebars-template" data-is-prerendered="true" data-is-iframe="true" data-key-code-for-closing="false">
  <iframe frameborder="0" allowtransparency="true" scrolling="no" src="1.html"></iframe>

4. Or create the modal content in a DOM node (without the need of Handlebars.js).

<div class="template" id="demo-popup">
  Modal Content here

5. The JavaScript to launch the modal windows.


6. Override the default options to customize the modal windows.

const myPopup = $.goodpopup.getPopup("demo-popup")


  // is pre-rendered
  isPrerendered: false,

  // content is an iframe
  isIframe: false,

  // saves the content when hidden
  isDetachable: false,

  // closes the modal by clicking outside 
  isOuterClickClosing: true,

  // is full width
  isFullWidth: false,

  // shows close button
  hasCloseButton: true,

  // close the modal with ESC key
  keyCodeForClosing: [27],

  // forces closing
  forceClosing: {
    click: true,
    keydown: true,
    button: false

  // Handlebars allows you to use an object with data for additional flexibility when rendering a template
  data: {}

7. Callback functions.


  callbackBeforeOpen: function() {},
  callbackAfterOpen: function() {},

  callbackBeforeClose: function() {},
  callbackAfterClose: function() {},

8. API methods.

// open the modal

// close the modal

// detect if is rendered

// detect if is hidden

// set options

// get options

// get content from the modal

// get modal ID



  • 2.0.0-beta.20: Refactor


  • 2.0.0-beta.19: Refactor

This awesome jQuery plugin is developed by eugene-lazarev. For more Advanced Usages, please check the demo page or visit the official website.