jQuery Responsive Popup That Works As Expected

Goodpopup is a lightweight, multi-browser jQuery popup plugin that lets you create easy-to-style semantic windows with templates based on the handlebars.js template library.

jQuery-plugin is responsive with great external coding and stable behavior. There is no internal coding. Create your own in-house pop-up tags as often as you can.

How to make use of it:

1. Load the required jQuery and handlebars.js libraries within the HTML web page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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 within the web page.

<link href="jquery.goodpopup/css/style.min.css" rel="stylesheet">
<script src="jquery.goodpopup/js/script.min.js"></script>

3. Put your modal content within the <script> tag.

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

<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>

<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>
</script>

4. Or create the modal content material in a DOM node.

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

5. The JavaScript to open the modal windows.

$.goodpopup.getPopup("demo-popup").open();

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

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

myPopup.setOptions({

  // 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 features.

myPopup.setOptions({

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

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

8. API strategies.

// open the modal
myPopup.open()

// close the modal
myPopup.close(true)

// detect if is rendered
myPopup.isRendered()

// detect if is hidden
myPopup.isHidden()

// set options
myPopup.setOptions({})

// get options
myPopup.getOptions()

// get content from the modal
myPopup.getPopupContent()

// get modal ID
myPopup.getPopupId()