Author: | jezuhke |
---|---|
Views Total: | 4,247 views |
Official Page: | Go to website |
Last Update: | May 9, 2015 |
License: | MIT |
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 });
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