Vintage popup window plugin. Check out demo.

• Installation
• Initialization
• Examples
• Options
• Methods
• Requirement
• Versioning

With npm

npm i -S vintage-popup

With yarn

yarn add vintage-popup

Add popup to your project

AMD

require(['vintage-popup'], function (Popup) {});

CommonJS

var Popup = require('vintage-popup');

ES6 (Webpack)

import Popup from 'vintage-popup';

Inline

<script src="vintage-popup.js"></script>

Include CSS file

<link href="vintage-popup.css" rel="stylesheet">
<link href="popup-default-theme.css" rel="stylesheet">

// initialize popup
$('button').popup();

// initialize with options
$('button').popup({
  closeOnEsc: false
});

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

// fix jQuery conflict (once)
Popup.expose($);

// use it!
$('button').popup();

<!-- Button which triggers modal -->
<button type="button" data-popup-target="example">
  Default popup
</button>

<!-- Popup -->
<div class="popup" data-popup-id="example" tabindex="-1" role="dialog">
    <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>

<!-- Button that triggers modal -->
<button type="button" data-popup-target="exampleRemote" data-popup-remote="/path/example.json">
  Remote popup
</button>

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

{
  "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>"
    }
  ]
}

Currently, there are 2 animation themes available:

• Default (popup-default-theme)
• Material (popup-material-theme)

To use them, simply import the corresponding css file

Type: Boolean

Default: true

If true, closes the popup by clicking anywhere outside it.

Type: Boolean

Default: true

If true, closes the popup after pressing the ESC key.

Type: Boolean

Default: false

If true, closes the popup when the size of the browser window changes.

Type: Boolean

Default: true

Open popup when clicking on element.

Type: Boolean

Default: true

Add 'padding-right' to element specified by 'lockScreenEl' option. Padding depends on the width of the scrollbar.

Type: jQuery|HTML

Default: document.body

Element to add padding.

Type: Boolean

Default: false

Prevent default action on button click.

Type: String

Default: 'popup'

Attached jQuery events namespace.

Type: String

Default: Button's ['data-popup-target'] value

Popup to open (its [data-popup-id] value).

Type: String

Default: '.popup__close'

Popup's 'close' button selector.

Type: String

Default: 'opened'

Class added to the popup when popup is opened.

Type: String

Default: 'popup-opened'

Class added to the body when popup is opened.

Type: Function

Default: n/a

Parameter: popup

Example:

$('.popupButton').popup({
  beforeOpen: function (popup) {
    console.log('Popup will open');
  }
});

Fires before popup will open.

Type: Function

Default: n/a

Parameter: popup

Fires when popup opened.

Type: Function

Default: n/a

Parameter: popup

Fires before popup will close.

Type: Function

Default: n/a

Parameter: popup

Fires when popup closed.

Type: Object

Default: Object

Example:

$('.popupButton').popup({
  remote: {
    url: 'ajax/request/path',
    onComplete: function (XHR, textStatus) {
      console.log('AJAX finished');
    }
  }
});

Popup remote settings.

Type: String

Default: Button's ['data-popup-remote'] value or undefined

AJAX url.

Type: Any

Default: n/a

AJAX data to send.

Type: Function

Default: n/a

Parameter: [XHR, AJAXsettings]

AJAX 'beforeSend' callback.

Type: Function

Default: n/a

Parameter: [XHR, textStatus]

AJAX 'complete' callback.

Type: Function

Default: n/a

Parameter: [XHR, textStatus, errorThrown]

AJAX 'error' callback.

// initialize and get access to popup's instance
// (if inited on multiple jQuery objects returns an array of instances)
var popupInstance = $('button').popup();

// open popup
popupInstance.open();

// close popup
popupInstance.close();

// kill popup instance
popupInstance.kill();

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

/**
 * Close all popups.
 *
 * @static
 * @param {String} [openedClassName='opened']
 */
Popup.closeAllPopups(openedClassName);

/**
 * Kill specified popup.
 *
 * @static
 * @param {String|jQuery} popup
 */
Popup.kill(popup);

/**
 * Expose popup module as jquery plugin.
 * Use before initialazing popup.
 * (fixes jquery conflict when using webpack's "import")
 *
 * @static
 * @param {jQuery} jQuery
 */
 Popup.expose($);

jQuery 1.9.1+

Current version is 0.2.2