Lightweight Modal Library in Pure JavaScript – Popzy.js

Popzy.js is a lightweight JavaScript modal library that enables you to display any content in a responsive, animated modal window, ideal for login forms, image galleries, or notifications.

The library uses smooth fade-in and scale effects, weighs around 2KB minified, and supports all modern browsers. More features included:

• Create modals from HTML strings or template elements
• Add custom buttons with callbacks
• Control modal behavior through configuration options
• Lock page scrolling automatically when modals open
• Manage multiple modal windows with proper stacking

How to use it:

1. Add references to the Popzy.js stylesheet and script on your webpage.

<link rel="stylesheet" href="popzy.min.css">
<script src="popzy.min.js"></script>

2. Enable a button to toggle a basic modal window:

<button id="trigger">
  Launch
</button>

const myModal = new Popzy({
  content: '<h2>An HTML Modal Window</h2>',
});
document.getElementById("trigger").onclick = () => myModal.open();

3. Customize the appearance and behavior of modal windows with the following options:

• content: (string) HTML content to display in the modal.
• templateId: (string) ID of a template element in your HTML to use as the modal content. If both content and templateId are provided, content takes precedence.
• enableScrollLock: (boolean) Prevents scrolling on the page when the modal is open (default: true).
• destroyOnClose: (boolean) Removes the modal from the DOM when closed (default: true).
• footer: (boolean) Displays a footer in the modal (default: false).
• cssClass: (array) Custom CSS classes to apply to the modal container.
• closeMethods: (array) Methods to close the modal: button, overlay, escape (default: [‘overlay’, ‘button’, ‘escape’]).
• scrollLockTarget: (function) A function that returns the element to lock scrolling on. Defaults to document.body.
• onOpen: (function) Callback function executed after the modal opens.
• onClose: (function) Callback function executed when the modal closes.

const myModal = new Popzy({
  content: 'Modal Content',
  templateId: 123,
  enableScrollLock: true,
  destroyOnClose: true,
  footer: false,
  cssClass: [],
  closeMethods: ["button", "overlay", "escape"],
  scrollLockTarget: () => document.body,
  onOpen: () => {},
  onClose: () => {},
});

4. Available API methods to control your modals programmatically:

// Opens the modal and executes the onOpen callback.
myModal.open(); 
// Closes the modal and executes the onClose callback. 
// Calling close(true) behaves like destroy().
myModal.close();
// Updates the modal content.
myModal.setContent(content);
// Updates the footer content.
myModal.setFooterContent(content); 
// Adds a button to the footer with a specified label, CSS class, and callback function.
myModal.addFooterBtn(label, cssClass, callback);
//  Completely removes the modal elements from the DOM and unbinds all associated events.
myModal.destroy();

FAQs

Q: Can I use Popzy.js with other JavaScript frameworks?

A: Yes, Popzy.js works with any JavaScript framework. Since it’s built with vanilla JavaScript and has no dependencies, you can use it alongside React, Vue, Angular, or any other framework.

Q: How do I style my modals with custom themes?

A: Add your custom CSS classes to the cssClass array in the options. You can then target .popzy__container, .popzy__content, and other elements in your CSS file to apply custom styles.

Q: Is it possible to create modals with dynamic content?

A: Absolutely. Use the setContent() method to update modal content dynamically based on user actions or API responses.

Q: How do I add custom buttons to my modal?

A: Use the addFooterButton() method to add buttons with custom labels, CSS classes, and callback functions. Set the footer: true option when creating your modal to enable the footer area.