Animated Clean Modal Window Using jQuery Plugin | Vintage Popup

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



  • 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 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="" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src=""></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="" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src=""></script>

4. Create a trigger button for conditional firing.

<button id="trigger">
  Launch The Modal

5. Initialize the plugin on the trigger button.


6. Display static content in a modal window.

<button id="trigger"
        Launch The Modal

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

7. Load the conditional content from the JSON file.

<button id="trigger"
        Launch The Modal

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

  openedClass      : 'opened',
  openedBodyClass  : 'popup-opened',
  closeBtnSelector : '.popup__close',
  targetPopupId    : $'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 {*} []
  remote           : { url: $'popup-remote') },

9. Callback functions available.

  beforeOpen       : null,
  afterOpen        : null,
  beforeClose      : null,
  afterClose       : null

10. General methods.

// open the modal;

// close the modal

// kill the modal

// open with remote data;


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.

Related Posts


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Leave a Reply

Your email address will not be published. Required fields are marked *