Lightweight Responsive Lightbox In Pure JavaScript – Modal.js

Category: Javascript , Modal & Popup | January 16, 2023
Author:cloudcmd
Views Total:130 views
Official Page:Go to website
Last Update:January 16, 2023
License:MIT

Preview:

Lightweight Responsive Lightbox In Pure JavaScript – Modal.js

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

You Might Be Interested In:


Leave a Reply