modal

lightbox library for displaying modals with api similar to FancyBox v2

Modal License NPM version Dependency Status 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:

<script src="./node_modules/@cloudcmd/modal/dist/modal.min.js"></script>

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

Related Repositories

bootstrap-modal

bootstrap-modal

Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more. ...

react-modal

react-modal

Accessible modal dialog component for React ...

css-modal

css-modal

A modal built out of pure CSS ...

jquery-modal

jquery-modal

The simplest possible modal for jQuery ...

react-native-modal

react-native-modal

A <Modal /> component for react-native ...