Neverending Programming Mistakes

npm

Bring the best of OSS JavaScript development to your projects with npm Orgs - private packages & team management tools.Learn more »

@cloudcmd/modal

1.1.2 • Public • Published

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

install

npm i @cloudcmd/modal

Downloadsweekly downloads

61

version

1.1.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability