Lightweight Fullscreen Popup Library – jpopup

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.1 (06/20/2025)

• update

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.

The post Lightweight Fullscreen Popup Library – jpopup appeared first on CSS Script.