jPopup

Simple lightweight (<2kB) and easy-to-use javascript popup plugin

Another popop?

Yep, I needed simple as possible popup plugin for personal use, so jPopup was born.

Demo

Demo available here.

Install

With npm:

npm install jpopup --save

Usage

Include required javascript:

import jPopup from 'jPopup';

Optionally, include stylings (or style it as you wish):

@import 'jPopup';

Define new instance and open popup:

<script>
    var myPopup = new jPopup({ // initialize jPopup
    	content: '<p>Lorem Ipsum...</p>'
        transition: 'fade',
        onOpen: function ($popupElement) {
            console.log('popup open');
        },
        onClose: function ($popupElement) {
            console.log('popup closed');
        }
    });

    myPopup.open(); // open popup
</script>

And that's that! Now you should see HTML markup in document tree:

<div class="jPopup jPopup--fade">
    <button type="button" class="jPopup-closeBtn"></button>
    <div class="jPopup-content"><p>Lorem Ipsum...</p></div>
</div>

Options

jPopup can take just several parameters - an object of key/value settings:

Name | Required | Type | Default | Description | | --- | --- | --- | --- | --- | | content | true | [String] | '' | Content to display | | transition | false | [String] | 'fade' | Type of appearance animation. Possible animation transitions: 'fade', 'slideInFromTop', 'slideInFromBottom', 'slideInFromLeft' and 'slideInFromRight' | | onOpen | false | [Function] | null | Callback to execute when popup is open, returned argument is popup (type: Element) | | onClose | false | [Function] | null | Callback to execute when popup is closed, returned argument is popup (type: Element) |

API

open() - open popup

close() - close popup

setContent(content) - set popup content (@param {String})

getContent() - get popup content (@return {String})

destroy() - destroy popup (remove from DOM and unbind events)

Browser support

It works in every modern browser.

License

jPopup is licensed under the MIT license.