Vintage Popup is a jQuery plugin for displaying responsive and highly customizable modal windows on a web application that supports static and dynamic form content (AJAX).

LIGHTWEIGHT (9KB) JAVASCRIPT MODAL WINDOW FOR EVERY BROWSER*

Features:

• Two themes combined: default and physical design.
• Page scrolling is locked when the form is opened.
• Loads content from an external JSON file.
• Close in ESC/Resize/Bg Click.
• callback functions.
• Custom launcher items.

How to make use of it:

1. Install the Vintage Popup package.

# Yarn
$ yarn add vintage-popup

# NPM
$ npm install vintage-popup --save

2. Load the basic javascript and style sheet into the HTML document.

// ES6
import Popup from 'vintage-popup';

<!-- Browser -->
<link href="dist/vintage-popup.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="dist/vintage-popup.min.js"></script>

<!-- Or from the CDN -->
<link href="https://unpkg.com/vintage-popup@latest/dist/vintage-popup.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="https://unpkg.com/vintage-popup@latest/dist/vintage-popup.min.js"></script>

3. Load the CSS theme of your choice after the base style sheet.

<!-- Default -->
<link href="dist/popup-default-theme.min.css" rel="stylesheet">
<!-- Material Design Theme -->
<link href="dist/popup-material-theme.min.css" rel="stylesheet">

<!-- Or from the CDN -->
<link href="https://unpkg.com/vintage-popup@latest/dist/popup-default-theme.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="https://unpkg.com/vintage-popup@latest/dist/popup-material-theme.min.css"></script>

4. Create a trigger button for conditional firing.

<button id="trigger">
  Launch The Modal
</button>

5. Initialize the plugin on the trigger button.

$('#trigger').popup();

6. Display static content in a modal window.

<button id="trigger"
        data-popup-target="demoPopup">
        Launch The Modal
</button>

<div class="popup" tabindex="-1" role="dialog" data-popup-id="demoPopup">
  <div class="popup__container">
      <div class="popup__close"><span></span><span></span></div>
      <div class="popup__content">
        <div class="popup__title">Popup title</div>
        <div class="popup__body">Popup body</div>
      </div>
  </div>
</div>

7. Load the conditional content from the JSON file.

<button id="trigger"
        data-popup-target="demoPopup"
        data-popup-remote="/data.json">
        Launch The Modal
</button>

<div class="popup" tabindex="-1" role="dialog" data-popup-id="demoPopup">
  <div class="popup__container">
      <div class="popup__close"><span></span><span></span></div>
      <div class="popup__content"></div>
  </div>
</div>

// data.json
{
  "replaces": [
    {
      "what": "[data-popup-id='exampleRemote'] .popup__content",
      "data": "<div class='popup__content'><div class='popup__title'>Popup title</div><div class='popup__body'>Popup body</div></div>"
    }
  ]
}

8. Configure the modal window with the following settings.

$('#trigger').popup({
  openedClass      : 'opened',
  openedBodyClass  : 'popup-opened',
  closeBtnSelector : '.popup__close',
  targetPopupId    : $button.data('popup-target'),
  eventsNameSpace  : 'popup',
  lockScreen       : true,
  lockScreenEl     : document.body,
  preventDefault   : false,
  closeOnBgClick   : true,
  closeOnEsc       : true,
  closeOnResize    : false,
  openOnClick      : true,
  /* AJAX options
   * @param {String} [options.remote.url]
   * @param {Function} [options.remote.onBeforeSend]
   * @param {Function} [options.remote.onError]
   * @param {Function} [options.remote.onComplete]
   * @param {*} [options.remote.data]
  */
  remote           : { url: $button.data('popup-remote') },
});

9. Callback functions available.

$('#trigger').popup({
  beforeOpen       : null,
  afterOpen        : null,
  beforeClose      : null,
  afterClose       : null
});

10. General methods.

// open the modal
instance.open();

// close the modal
instance.close();

// kill the modal
instance.kill();

// open with remote data
instance.open(ajaxResponse);

See Demo And Download

Official Website(Inspired-by-Boredom): Click Here

This superior jQuery/javascript plugin is developed by Inspired-by-Boredom. For extra Advanced Usage, please go to the official website.