lightbox library for displaying modals with api similar to FancyBox v2
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
example
img
lib
screen
test
.babelrc
.eslintrc
.gitignore
.npmignore
.stylelintrc
.travis.yml
ChangeLog
LICENSE
README.md
package.json
webpack.config.js

README.md

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