modal

lightbox library for displaying modals with api similar to FancyBox v2

3 months after

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

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

angular-modal-service

angular-modal-service

Modal service for AngularJS - supports creating popups and modals via a service. ...

ember-modal-dialog

ember-modal-dialog

An ember-cli addon for implementing modal dialogs ...