Lightweight Responsive Lightbox In Pure JavaScript – Modal.js

Category: Javascript , Modal & Popup | March 22, 2019
Author: cloudcmd
Views Total: 986
Official Page: Go to website
Last Update: March 22, 2019
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:

03/22/2019

  • v2.1.1

You Might Be Interested In:


Leave a Reply