CSS3 Animated Modal In Pure JavaScript – pureModal.js

Category: Javascript , Modal & Popup | July 26, 2016
Views Total:973 views
Official Page:Go to website
Last Update:July 26, 2016


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() {

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

You Might Be Interested In:

Leave a Reply