cloudcmdModal 
Lightbox library for displaying modals with api similar to FancyBox v2.
Install
npm i @cloudcmd/modalHow Come?
I used fancybox for a long time but there is a couple things I don't like about it:
- has not tests
- uses jquery
- big (
30kbofjquery+13kb=43kbagainst23kbofmodal) - slow
- does not support
common.js,esmetc - license not compatible with
MIT
Modal in the other hand:
- written on vanilla js
- has no extra dependencies
- has full test coverage
- does most stuff using
css - can be installed using
npm - supports
common.js,esm - contains
cssandimagesinside of ajsbundle (for using withwebpackseewebpack.config.js) - Api compatible with
fancybox
API
First things first, import modal with:
import modal from '@cloudcmd/modal';Using build file:
open(el[, options])
const el = document.createElement('div');
el.textContent = 'hello';
// simplest possible modal open using existing html element
modal.open(el);
modal.close();
// usage with title and hooks
modal.open(el, {
title: 'hello world',
beforeOpen: () => console.log('before open'),
afterOpen: () => console.log('after open'),
beforeClose: () => console.log('before close'),
afterClose: () => console.log('after close'),
helpers: {
title: true,
},
});open(images[, options])
const image = {
title: 'hello',
href: 'cloudcmd.png',
};
modal.open([image], {
autoSize: true,
helpers: {
title: true,
},
});close
Close opened modal window:
modal.close();License
MIT