Simple Vanilla JavaScript Modal Library

Preview:

Description:

Vanilla Modal is a simple, flexible, lightweight modal library written in pure JavaScript and CSS. Works with any web contents such as text, images, videos and more.

Installation:

# NPM
$ npm install vanilla-modal
# Bower
$ bower install vanilla-modal

Basic usage:

Import the vanilla-modal into your project:

// ES 2015
import VanillaModal from 'vanilla-modal';
// CommonJS:
const VanillaModal = require('vanilla-modal');
// AMD
require(['/dist/index.js'], function(VanillaModal) {
  const vanillaModal = new VanillaModal();
});
// Browser
<script src="/dist/index.js"></script>

Load the required stylesheet in your document.

<link rel="stylesheet" href="modal.css">

Embed your modal content into a hidden DIV container as this:

<div id="modal-demo" style="display:none">
  Your modal content here
</div>

To toggle the modal, just add the ‘data-modal-open’ attribute to the trigger element linking to the modal container.

<a href="#modal-demo" data-modal-open>Launch</a>

Initialize the modal library and done.

var modal = new VanillaModal.default();

All possible options with default values.

{
  modal: '.modal',
  modalInner: '.modal-inner',
  modalContent: '.modal-content',
  open: '[data-modal-open]',
  close: '[data-modal-close]',
  page: 'body',
  loadClass: 'vanilla-modal',
  class: 'modal-visible',
  clickOutside: false,
  closeKeys: [27],
  transitions: true,
  onBeforeOpen: null,
  onBeforeClose: null,
  onOpen: null,
  onClose: null
}