Author: | robiveli |
---|---|
Views Total: | 4,423 views |
Official Page: | Go to website |
Last Update: | June 20, 2025 |
License: | MIT |
Preview:

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.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.
How to load data on div tags?