Easy Animated Modal Window Library – ModalJS

Just another JavaScript modal library which helps you create animated, dynamic, customizable popup window on the webpage.

Basic usage:

Make sure you have the Modal.css and Modal.js loaded correctly in the webpage.

<link href="src/Modal.css" rel="stylesheet">
<script src="src/Modal.js"></script>

Display a modal window on page load.

ModalJS.show({
  top: 'Modal Title',
  middle: 'Modal Content (innerHTML is supported)'
});

Toggle the modal window by clicking on the trigger element.

<input id="demo" type="button" value="Open The Modal">

ModalJS.addEvent(
  demo, 'click',
  function()
  {
      ModalJS.show({
        top: 'Modal title',
        middle: 'Modal content'
      });
  }
);

More configuration options.

ModalJS.show({
  top: 'Modal Title',
  middle: 'Modal Content (innerHTML is supported)',
  bottom: 'Modal Footer',
  transiiton: 'fast', // 'slow', 'fast' or 'normal',
  background: true, // displays background overlay
  mono: true // displays mono
});

Show / hide the modal window manually.

ModalJS.showModal()
ModalJS.hideModal()