Demo

View examples here: https://persianturtle.github.io/popupjs/

Philosphy & Goals

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

The goals for this project are to:

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

Features

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

Getting Started

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

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

3. Register the popup by calling the register function:

   window.popup.register("className")
   

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

5. See the "Usage & Options" section below for all available options.

API

This library exposes three functions:

1. window.popup.register(_className[, options]_)

   Parameters:

   className

   string

   By default, the class name of the popup element:

   <div class="popup className">
   

   as well as the class names of the trigger elements:

   <a class="trigger className">
   

   options

   object

   See a full list of options in the options section.

   Return value:

   popup

   object

   An object with the following shape:

     {
       triggers: NodeList,
       element: Node,
       ...options
     }
   

2. window.popup.open(_popup[, event]_)

   Parameters:

   popup

   object

   The popup object returned from window.popup.register.

   event

   event

   The event that triggered a popup's opening.

3. window.popup.close(_popup[, event]_)

   Parameters:

   popup

   object

   The popup object returned from window.popup.register.

   event

   event

   The event that triggered a popup's closing.

Options

triggers

NodeList

Overwrite the default NodeList of:

document.querySelectorAll(".trigger.className")

element

Node

Overwrite the default Node of:

document.querySelector(".popup.className")

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.