Add Pure JavaScript To Create Modal Windows | pureModal.js

PureModal.js Pure JavaScript plugin for creating modal windows with support for multiple independent windows.

Features

• More options and styles
• Add events
• Intelligently handles download errors
• More customization in js without editing CSS
• New default animation or use animate.css
• Send your suggestions

Must Read: Pure Responsive CSS Overlay Modal Popup Plugin

How to make use of it:

Include both the pureModal.css stylesheet and the pureModal.js JavaScript 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();
});

Complete 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

See Demo And Download

Official Website(igor-budzin): Click Here

This superior jQuery/javascript plugin is developed by igor-budzin. For extra Advanced Usage, please go to the official website.

Tags: igor-budzinmodalmodal dialogmodal popupmodal windowpureModal.jswindows