Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @cloudcmd/modal with all npm packages installed. Try it out:

var modal = require("@cloudcmd/modal")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@cloudcmd/modal v2.0.3

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.



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


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;
  // usage with title and hooks, {
    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',
  };[image], {
    autoSize: true,
    helpers: {
      title: true,


Close opened modal window:




RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free