Responsive Animated Modal Window with Pure JavaScript

Category: Javascript , Modal & Popup | May 9, 2015
Author:jezuhke
Views Total:4,247 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