Modal
Lightbox library for displaying modals with api similar to FancyBox v2.
Install
npm i @cloudcmd/modal
How 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 (
30kb
ofjquery
+13kb
=43kb
against23kb
ofmodal
) - slow
- does not support
common.js
,esm
etc - 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
css
andimages
inside of ajs
bundle (for using withwebpack
seewebpack.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