Lightweight Responsive jQuery Modal Popup Plugin - modality

modality is a simple lightweight yet flexible, responsive and customizable modal plugin for jQuery that comes with 20 awesome popup transition effects powered by CSS3 animations. modality also provides a stand-alone version which enables you to quickly implement the modal popup plugin in pure JavaScript.

How to use it:

1. Load the required modality.css in your document's head section.

<link href="css/modality.css" rel="stylesheet">

2. Create a modal popup like so:

<div id="yourModalId" class="yourModalClass" style="display:none;">
  <h2>Title</h2>
  <p>Modal Content</p>
  <a href="#yourModalId">Close Modal</a> 
</div>

3. Style the modal popup however you like.

.yourModalClass {
  background-color: #e95546;
  border: 1px solid #fc6d58;
  padding: 0 1.5em 1em;
  border-radius: 5px;
  max-width: 380px;
  color:#fff;
}

5. Enable the modal popup using jQuery.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/modality.jquery.min.js"></script> 
<script>
$('#yourModalId').modality({
// OPTIONS
});
</script> 

6. Or using pure JavaScript.

<script src="js/modality.min.js"></script>
<script>
var modal1 = Modality.init('#yourModalId', {
// OPTIONS
});
</script>

7. All the default options.

// automatically bind triggers to modal
bind: true, 

// user can add a class to container
class: '', 

// click anywhere off of modal to close it
clickoff: true, 

// animation style
// "scale-up", "scale-down" 
// "slide-left", "slide-right" 
// "slide-up", "slide-down" 
// "sticky-top", "sticky-bottom" 
// "horizontal-flip", "vertical-flip" 
// "spin-up", "spin-down" 
// "fall-left", "fall-right" 
// "swing-down", "swing-up" 
// "swing-left", "swing-right" 
// "front-flip", "back-flip"
effect: "", 

// set false to disable modal
enabled: true, 

// close modal with 'esc' key
keyboard: true, 

// open on page load
open: false, 

// inner wrapper
inner: 'mm-wrap',

// when modal is visible
visible: 'mm-show',

// outer-most container
outer: 'modality-modal',

// function to run when modal closes
onClose: "", 

// function to run when modal opens
onOpen: ""

Change logs:

2015-04-12

• Make it accessibility.

2015-03-29

• v2.0.

2015-03-26

• Update modality.jquery.js

2015-03-19

• 'Enable/Disable' Functionality
• Update modality.min.js

2015-01-31

• Update modality.js

---

This awesome jQuery plugin is developed by marksmccann. For more Advanced Usages, please check the demo page or visit the official website.