Popzy is a lightweight modal library built with pure JavaScript. (Source code available on GitHub)
Here are some examples of how to use Popzy:
Method | Steps |
---|---|
Direct Download |
Download ZIP
Simply extract the ZIP file and use the
|
Popzy provides a small CSS file that you can include directly via a CDN link. This makes it easy to integrate into your project and customize as needed.
Include the Popzy JavaScript file in your project:
<script src="https://cdn.jsdelivr.net/gh/sondnpt00343/popzy/popzy.min.js"></script>
Optionally, include the Popzy CSS file for default styling:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/sondnpt00343/popzy/popzy.min.css"
>
You can explore the list of CSS classes used by Popzy in the Styling section to easily customize them as needed.
// Initialize a new modal
const modal = new Popzy({
content: '<h1>This is content</h1>',
// templateId: 'my-modal-template',
footer: true,
destroyOnClose: false,
closeMethods: ['overlay', 'button', 'escape'],
cssClass: ['custom-class-1', 'custom-class-2'],
onOpen: function() {
console.log('Modal opened');
},
onClose: function() {
console.log('Modal closed');
},
});
// Set modal content
modal.setContent('<h1>This is new content</h1>');
// Add footer buttons
modal.addFooterBtn('Cancel', 'btn btn--default', function(e) {
modal.close();
});
modal.addFooterBtn('Confirm', 'btn btn--primary', function(e) {
modal.close();
});
// Open the modal
modal.open();
// Close the modal
modal.close();
If you use templateId
, ensure that a
<template>
element with the corresponding
id
exists in your HTML. Below is an example:
<template id="my-modal-template">
<div>
<h1>This is modal content</h1>
<p>You can add any HTML here.</p>
</div>
</template>
Note: When using templateId
, do
not provide content
. If both are specified,
content
will take precedence, and
templateId
will be ignored.
Option | Type | Description |
---|---|---|
content, templateId | string |
One of content or
templateId is required to set the modal
content. content accepts an HTML string,
while templateId specifies the ID of a
template element. If both are provided,
content will take precedence.
|
footer | boolean |
Shows a footer in the modal (default:
false )
|
destroyOnClose | boolean |
Decides whether the modal is removed from the DOM upon
closing (default: true )
|
closeMethods | array |
Defines methods to close the modal (default:
['overlay', 'button', 'escape'] )
|
enableScrollLock | boolean |
Enables or disables scroll locking when the modal is
open. When set to
true , it prevents scrolling on the target
element specified by scrollLockTarget .
Default: true .
|
scrollLockTarget | function |
A callback that returns the element to apply scroll
locking on. By default, it locks scrolling on
document.body .
|
onOpen | function |
Callback function executed when the modal opens (after
transition ends) (default: undefined )
|
onClose | function |
Callback function executed when the modal closes
(default: undefined )
|
cssClass | array |
Custom CSS classes applied to the modal container
(default: [] )
|
Popzy styles are defined in CSS, with some positioning handled by JavaScript. You can fully customize it to meet your design requirements.
Class Name | Description/Role |
---|---|
.popzy |
Styles the backdrop overlay for the modal. Handles positioning, centering the modal, and applying a semi-transparent background. |
.popzy--show |
Applied when the modal is visible. Controls the visibility and opacity of the backdrop. |
.popzy__container |
Styles the modal container, including its size, padding, border-radius, and transform animations for scaling in/out. |
.popzy__close |
Styles the close button inside the modal, including its size, position, and hover effects. |
.popzy__content |
Handles the modal's main content area, including scrollable behavior with a maximum height. |
.popzy__footer |
Styles the modal footer, aligning buttons to the right and adding spacing between them. |
.popzy--no-scroll |
Disables scrolling on the body when the modal is open. |
For more details, you can view the full CSS file directly here: popzy.css.
Method | Description |
---|---|
open() |
Opens the modal and triggers the
onOpen callback.
|
close() |
Closes the modal and triggers the
onClose callback.
|
setContent(content) | Updates the modal content |
setFooterContent(content) | Updates the footer content |
addFooterBtn(label, cssClass, callback) | Adds a button to the footer with a callback function |
destroy() | Removes the modal and unbinds all events |
Lorem ipsum dolor sit amet.
This modal includes functional buttons for actions such as canceling or confirming.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis, mollitia?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi ratione, nesciunt nobis repellendus pariatur hic rem praesentium similique sequi! Repudiandae quam, architecto, minus deserunt laboriosam aspernatur praesentium magnam, blanditiis quia fugiat cumque laudantium nesciunt sequi eius facilis nobis quibusdam! Est impedit excepturi sit rem rerum cumque aperiam aliquid, atque at qui placeat reprehenderit quas ex adipisci molestiae fugit. Itaque ducimus ipsam perferendis ratione veniam ex quaerat cupiditate laboriosam expedita quo, dicta temporibus laudantium assumenda quas vitae dignissimos pariatur ab. Mollitia nihil ducimus quia quo asperiores?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus itaque asperiores architecto eligendi assumenda. Culpa laboriosam, molestiae voluptatum iusto tempore tempora beatae porro aspernatur sint, nesciunt dolor, libero rem ut. Corporis dolorum velit blanditiis consequuntur assumenda veritatis aliquam? Eos quod repellendus neque, sed dolorem accusantium magni aspernatur nam. Eius, placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis cum quibusdam earum harum laboriosam quod, itaque voluptatem vel beatae aut officiis explicabo accusamus voluptates aliquam suscipit officia omnis expedita fugiat, voluptatibus iste aliquid. Veniam reprehenderit tempora odio quam nobis expedita in fugiat officiis obcaecati magnam, facere consequatur repellendus, laudantium delectus. Magnam beatae sunt maxime mollitia dicta aspernatur et voluptatem magni, saepe fugit inventore? Tempora at harum eius in ipsa obcaecati veritatis accusamus nulla nam dignissimos, corrupti eaque sed necessitatibus sunt illo perferendis consectetur. Similique ut asperiores natus at tempore pariatur, reiciendis, autem eaque, beatae voluptatem repellat doloribus vero nostrum repellendus quam exercitationem. Delectus saepe dicta ipsam ex possimus animi, sequi tempora, cum eius at aut illo non repellendus corporis totam. Ab mollitia adipisci perspiciatis nemo reiciendis nostrum quidem debitis non. Officia rem quas, voluptatum veniam autem sit est. Voluptate, deserunt ullam maiores recusandae officiis eaque sint nisi nulla alias modi?
This modal stays in the DOM even after being closed, allowing you to reopen it without losing any changes.
You can write something in the input below, close the modal, and reopen it to see the content still intact.
This modal demonstrates interaction between multiple modals. You can open another modal from here.