Author: | kingarthurpt |
---|---|
Views Total: | 1,099 views |
Official Page: | Go to website |
Last Update: | June 30, 2015 |
License: | MIT |
Preview:

Description:
vanillaModal.js is a lightweight vanilla javascript plugin intended to display a responsive, always centered modal window on your website / web app. Comes with a ‘fade and drop’ animation based on CSS3 transitions and transforms.
How to use it:
Import the stylesheet vanillaModal.css and JavaScript vanillaModal.js in the html page.
<link rel="stylesheet" href="css/vanillaModal.css"> <script src="js/vanillaModal.js"></script>
Create the content for the modal. You can also define the inline content via ‘content’ option during initialization.
<div id="content"> <h1>Modal Heading</h1> <p>Modal Content</p> </div>
Create a new modal instance.
var myContent = document.getElementById('content'); var myModal = new Modal({ content: myContent, });
Open the modal.
myModal.open();
Default options.
// fade and drop animation // you can add your own animation in the CSS and replace the CSS class name here className: 'fade-and-drop', // displays a close button inside the modal closeButton: true, // custom inline content displayed in the modal content: "", // max width of the modal maxWidth: 600, // min width of the modal minWidth: 280, // displays a fullscreen overlay overlay: true