Lightweight Responsive Lightbox In Pure JavaScript – Modal.js

Preview:

Description:

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
$ npm install @cloudcmd/modal --save

import modal from '@cloudcmd/modal';

Or load the Modal.js from a CDN.

<script src="https://unpkg.com/@cloudcmd/[email protected]/dist/modal.min.js"></script>

Display any content in the modal.

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

Display an image in the modal.

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

Available options to customize the modal.

modal.open(el, {
  // auto resize for responsive design
  autoSize: false,
  // helpers
  helpers: {},
  // modal title
  title: ''
  
});

Event handlers.

modal.open(el, {
  beforeShow: noop,
  beforeClose: noop,
  afterShow: noop,
  afterClose: noop,
  onOverlayClick: noop
});

Close the modal manually.

modal.close();

Changelog:

01/16/2023

• v3.0.2