Lightweight and Customisable jQuery Modal Window Plugin - jQuery Modal

jQuery Modal is a extremely lightweight jQuery plugin for creating neat, customizable, performant and easy-to-integrate modal windows on your website. With its flexible API, The plugin can do any common task such as confirmation boxes, displaying images and even external content.

Basic Usage:

1. The html

<button class="js-open">Click me</button>

<p id="example-content" style="display:none;">
Example Content
</p>

2. The CSS

.modal-overlay {
z-index: 300;
background: rgba(0, 0, 0, 0.25);
}
.modal-wrapper {
z-index: 310;
background: #fff;
border-radius: 15px;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}
.modal-content {
padding: 2.5em 1em 1em;
}
.modal-close {
position: absolute;
top: .5em;
right: 1em;
z-index: 320;
font-size: .75em;
cursor: pointer;
}

3. Include the latest jQuery library and jQuery Modal on the web page

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 
<script src="src/modal.js"></script> 

4. The javascript

<script>
$(function()
{
// Create a modal instance.
var $m = $('body').modal(),

// Access an instance API
api = $m.data('modal');

// Bind a click event to copy a hidden elements content into the modal window
$(document).on('click', '.js-open', function()
{
api.open( document.getElementById('example-content').innerHTML );
});

window.$m = $m;
});
</script>

---

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