Modern Clean Modal Window Plugin - jQuery Vintage Popup

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

More features:

• 2 built-in themes: Default and Material Design.
• Locks the page scroll when the modal is opened.
• Loads content from an external JSON file.
• Close on ESC/Resize/Bg Click.
• Callback functions.
• Custom trigger elements.

How to use it:

1. Install the Vintage Popup package.

# Yarn
$ yarn add vintage-popup

# NPM
$ npm install vintage-popup --save

2. Load the core JavaScript and Stylesheet in 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 a theme CSS of your choice after the core stylesheet.

<!-- 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 to launch the modal.

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

5. Initialize the plugin on the trigger button.

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

6. Display static content in the 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 modal content from a 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. Config 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. Public methods.

// open the modal
instance.open();

// close the modal
instance.close();

// kill the modal
instance.kill();

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

Changelog:

2021-11-07

• v0.2.2

2021-10-31

• v0.2.1

---

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