CSS3 Animated Modal In Pure JavaScript – pureModal.js

pureModal.js is a dependency-free JavaScript library used to create CSS3 animated modal windows that supports text content, external links and html tags.

How to use it:

Include both stylesheet pureModal.css and JavaScript pureModal.js on the webpage.

<link rel="stylesheet" href="css/pureModal.css">
<script src="js/pureModal.js"></script>

Create a new modal window with several options.

var modal = new pureModal({
    autoOpen: true, // auto open on page load
    content: "Your content or link on html tag",
    titleText: "It's modal title"
});

Create a button to toggle the modal window.

<a href="#" class='openLink'>Open window</a>

var button = document.querySelector('.openLink');
button.addEventListener('click', function() {
  modal.open();
});

Full options with default values.

// CSS classname for custom animation
className: 'fade-and-drop',
// shows close button
closeButton: true,
// custom content
content: "",
// max/min width of the modal
maxWidth: 600,
minWidth: 280,
// shows background overlay
overlay: true,
// shows title
title: true,
// custom text
titleText: "",
// auto open the modal when the page is completely loaded
autoOpen: false