CSS3 Animated Modal In Pure JavaScript – pureModal.js

Category: Javascript , Modal & Popup | July 26, 2016
Author:igor-budzin
Views Total:958 views
Official Page:Go to website
Last Update:July 26, 2016
License:MIT

Preview:

CSS3 Animated Modal In Pure JavaScript – pureModal.js

Description:

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

You Might Be Interested In:


Leave a Reply