Philosphy & Goals

Are you comfortable writing CSS/JS? This popup library is for you!

The goals for this project are to:

make styling easy without needing to overwrite a bunch of CSS
allow custom functionality with access to the raw event that triggered a popup's opening/closing
have no dependencies with support for modern browsers
handle the basic stuff like animations, overlays and preventing body scrolling while open

Examples

Basic
Full-size
This video popup uses a custom function to set an iframe's source from it's trigger's video attribute:
```
<a video="https://vimeo.com/groups/freehd/videos/136920991">video popup</a>
```
Show an interstitial when users click on an external link. This uses event.target.href to get the link's URL.
Show a popup to visitors before accessing a url, unless there exists a certain cookie in the user's browser with an appropriate value. Click here to learn more.

Allows custom functions to be executed before/after opening/closing with access to the event that triggered a popup's opening/closing
Opening & closing animations
Disable body scrolling when a popup is open
Automatically closes existing popups before opening new ones
Easy styling with minimum default styles
Can be used for all types of popups (see examples)

Include both popup.js and popup.css. Both, combined is around 1kb minified & gzipped.

Include a popup's HTML with the following wrapper:

<div class="popup className">
  <div class="content">
  [your popup's HTML here]
  </div>
  <button class="close">×</button>
</div>

Register the popup by calling the register function:
```
window.popup.register("className")
```
Add custom CSS for your popup. This library provides almost no default styling. It does handle the popup animation as well as the tinted overlay. The rest is up to you!
See the "Usage & Options" section below for all available options.

This library exposes three functions:

triggers
NodeList Overwrite the default NodeList of: document.querySelectorAll(".trigger.className") where className is the first argument passed to the register function.: element
Node Overwrite the default Node of: document.querySelector(".popup.className") where className is the first argument passed to the register function.: preventCloseOnOutsideClick
boolean If true, clicking outside of the popup's .content will not close the popup. Default: false.: center
boolean If true, the popup will be vertically centered. Default: false.: beforeOpen
function A function that will be executed immediately before a popup opens. The function will be passed in the event that opened the popup. If the beforeOpen function returns false, the popup will not open.: afterOpen
function A function that will be executed immediately after a popup opens. The function will be passed in the event that opened the popup.: beforeClose
function A function that will be executed immediately before a popup closes. The function will be passed in the event that closed the popup.: afterClose
function A function that will be executed immediately after a popup closes. The function will be passed in the event that closed the popup.