Lightweight Responsive Lightbox In Pure JavaScript – Modal.js

Category: Javascript , Modal & Popup | September 19, 2019
Author: cloudcmd
Views Total: 1,084 views
Official Page: Go to website
Last Update: September 19, 2019
License: MIT


Lightweight Responsive Lightbox In Pure JavaScript – Modal.js


Modal.js is a lightweight vanilla JavaScript plugin to create any content modal windows just like the fancyBox does.

How to use it:

Install & Import.

$ npm install @cloudcmd/modal --save
import modal from '@cloudcmd/modal';

Or load the Modal.js from a CDN.

<script src="[email protected]/dist/modal.min.js"></script>

Display any content in the modal.

const el = document.createElement('div');;

Display an image in the modal.

const img = {
      href: '1.jpg',
      title: 'Image Title',
};[img], {
  // options here

Available options to customize the modal., {

  // auto resize for responsive design
  autoSize: false,

  // helpers
  helpers: {},

  // modal title
  title: ''

Event handlers., {

  beforeShow: noop,
  beforeClose: noop,
  afterShow: noop,
  afterClose: noop,
  onOverlayClick: noop


Close the modal manually.




  • v2.0.1

You Might Be Interested In:

Leave a Reply