npm

@cloudcmd/modal

3.0.2 • Public • Published

Modal License NPM version Build Status Coverage

Lightbox library for displaying modals with api similar to FancyBox v2.

Modal

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 of jquery + 13kb = 43kb against 23kb of modal)
  • 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 and images inside of a js bundle (for using with webpack see webpack.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

Package Sidebar

Install

npm i @cloudcmd/modal

Weekly Downloads

98

Version

3.0.2

License

MIT

Unpacked Size

29.3 kB

Total Files

14

Last publish

Collaborators

  • coderaiser