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 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