Responsive Animated Modal Window with Pure JavaScript

Category: Javascript , Modal & Popup | May 9, 2015
Author: jezuhke
Views Total: 4,013 views
Official Page: Go to website
Last Update: May 9, 2015
License: MIT

Preview:

Responsive Animated Modal Window with Pure JavaScript

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
    
});

You Might Be Interested In:


One thought on “Responsive Animated Modal Window with Pure JavaScript

  1. Mohini Borhade

    Hello I am inserting html elements into content and I want to call some events on these elements, this popup does not recognize any events. Please advice

    Reply

Leave a Reply