Responsive Animated Modal Window with Pure JavaScript

Preview:

Description:

A vanilla JavaScript library that helps you create a simple responsive modal window with fancy show/hide animations based on CSS3.

How to use it:

Load the required stylesheet in the header.

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

Embed your html content into the modal container.

<div id="content">
  <h1>Look at me!</h1>
  <p>I'm a modal window.</p>
</div>

Create a trigger button to launch the modal window.

<button id="trigger" class="trigger-button" type="button">Launch Modal</button>

Initialize the modal window. By default, the modal window slides down from the top of your browser when triggered.

var myContent = document.getElementById('content');

var myModal = new Modal({
    content: myContent
});

var triggerButton = document.getElementById('trigger');

triggerButton.addEventListener('click', function() {
    myModal.open();
});

Option defaults.

var myModal = new Modal({

    // auto open on page load
    autoOpen: false,

    // animation type
    // fade-and-drop, zoom, zoom-and-spin
    className: 'fade-and-drop',

    // display a close button
    closeButton: true,

    // modal content to be displayed
    content: "",

    // max / min width of the modal window
    maxWidth: 600,
    minWidth: 280,

    // display a fullscreen overlay
    overlay: true
    
});