Basic Vanilla JavaScript Modal with CSS3 Animation – vanillaModal.js

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