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


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 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:;

Set & update popup content:


Destroy the instance.


Customize the popup in the SASS:

// Base Breakpoint
$baseBreakpoint: 680px;

// Background Color
$bgColor: #fff;

// Close Button Color
$closeBtnColor: #adadad;


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


  • v1.3.1: API updated


  • v1.2.1: minor updates.

You Might Be Interested In:

One thought on “Lightweight Fullscreen Popup Library – jpopup

Leave a Reply