npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vintage-popup

v0.2.2

Published

Vintage popup window plugin

Downloads

19

Readme

Vintage popup

Vintage popup window plugin. Check out demo.

Overview

Installation

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

Initialization

Default initialization

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

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

Initialization with webpack's "import"

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

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

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

Examples

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

Popup with remote data source

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

example.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>"
    }
  ]
}

Themes

Currently, there are 2 animation themes available:

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

To use them, simply import the corresponding css file

Options

closeOnBgClick

Type: Boolean

Default: true

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

closeOnEsc

Type: Boolean

Default: true

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

closeOnResize

Type: Boolean

Default: false

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

openOnClick

Type: Boolean

Default: true

Open popup when clicking on element.

lockScreen

Type: Boolean

Default: true

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

lockScreenEl

Type: jQuery|HTML

Default: document.body

Element to add padding.

preventDefault

Type: Boolean

Default: false

Prevent default action on button click.

eventsNameSpace

Type: String

Default: 'popup'

Attached jQuery events namespace.

targetPopupId

Type: String

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

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

closeBtnSelector

Type: String

Default: '.popup__close'

Popup's 'close' button selector.

openedClass

Type: String

Default: 'opened'

Class added to the popup when popup is opened.

openedBodyClass

Type: String

Default: 'popup-opened'

Class added to the body when popup is opened.

beforeOpen

Type: Function

Default: n/a

Parameter: popup

Example:

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

Fires before popup will open.

afterOpen

Type: Function

Default: n/a

Parameter: popup

Fires when popup opened.

beforeClose

Type: Function

Default: n/a

Parameter: popup

Fires before popup will close.

afterClose

Type: Function

Default: n/a

Parameter: popup

Fires when popup closed.

remote

Type: Object

Default: Object

Example:

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

Popup remote settings.

remote.url

Type: String

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

AJAX url.

remote.data

Type: Any

Default: n/a

AJAX data to send.

remote.onBeforeSend

Type: Function

Default: n/a

Parameter: [XHR, AJAXsettings]

AJAX 'beforeSend' callback.

remote.onComplete

Type: Function

Default: n/a

Parameter: [XHR, textStatus]

AJAX 'complete' callback.

remote.onError

Type: Function

Default: n/a

Parameter: [XHR, textStatus, errorThrown]

AJAX 'error' callback.

Methods

Instance method

// 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);

Static methods

/**
 * 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($);

Requirement

jQuery 1.9.1+

Versioning

Current version is 0.2.2