Lightweight Fullscreen Popup Library – jpopup

Category: Javascript , Modal & Popup | May 31, 2020
Author: robiveli
Views Total: 269 views
Official Page: Go to website
Last Update: May 31, 2020
License: MIT

Preview:

Lightweight Fullscreen Popup Library – jpopup

Description:

jpopup is a super small JavaScript popup plugin that allows to display any HTML element in a responsive fullscreen modal window.

Install the jpopup:

# NPM
$ npm install jpopup

# Bower
$ bower install jpopup

How to use it:

1. Import the jpopup’s JavaScript and CSS files into the document.

// As A Module
import jPopup from 'jPopup';
<link href='css/index.min.css' rel='stylesheet'>
<script src="js/index.min.js"></script>

2. Create a new jPopup and define your own content to be displayed in the popup.

var jPopupDemo = new jPopup({
    content: 'any html content here'
});

3. Determine the transition effects: ‘fade’ (default), ‘slideInFromTop’, ‘slideInFromBottom’, ‘slideInFromLeft’, or ‘slideInFromRight’.

var jPopupDemo = new jPopup({
    transition: 'fade'
});

4. Callback functions.

var jPopupDemo = new jPopup({
    onOpen: function ($popupEl) {
      console.log($popupEl, 'open');
    },
    onClose: function ($popupEl) {
      console.log($popupEl, 'close');
    }
});

Open/close the popup manually:

jPopupDemo.open();
jPopupDemo.close();

Set & update popup content:

jPopupDemo.setContent(content);
jPopupDemo.getContent();

Destroy the instance.

jPopupDemo.destroy();

Customize the popup in the SASS:

// Base Breakpoint
$baseBreakpoint: 680px;

// Background Color
$bgColor: #fff;

// Close Button Color
$closeBtnColor: #adadad;

Changelog:

v2.0.0 (05/31/2020)

  • new API methods
  • remove History API support
  • drop support for IE10
  • main files rename
  • popup open() initialized manually
  • new appearance transitions
  • new CSS class naming
  • no need for polyfills

01/02/2020

  • v1.3.1: API updated

09/29/2018

  • v1.2.1: minor updates.

You Might Be Interested In:


One thought on “Lightweight Fullscreen Popup Library – jpopup

Leave a Reply