Super Simple jQuery Modal Window Plugin - Simple Modal

Simple Modal is yet another simple and lightweight jQuery plugin for creating modal popup windows with full-screen overlay effect. It currently supports on-page data, ajax data and image gallery. Click the blank area of the page will close the modal window.

Basic Usage:

1. Create a container for the modal window

<div class="demo"> This is a modal. </div>

2. Create a link to trigger the modal window

<a href="#" id="show_modal">Click me</a>

3. The CSS

.simple-modal-box, .simple-modal-backdrop {
/* The plugin appends these items to the DOM without
        making any effort to hide them, so this must be set. */
display: none;
}
.simple-modal-box {
z-index: 100;
background: #fff;
min-width: 300px;
min-height: 100px;
padding: 20px;
/* Position values needed to center the modal box */
position: fixed;
top: 50%;
left: 50%;
}
.simple-modal-backdrop {
background: rgba(0,0,0,.75);
z-index: 99;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.demo {
display: none;
}
a {
display: block;
margin-bottom: 20px;
}

4. Include the latest jQuery library and jQuery Simple Modal on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="jquery.simplemodal.js"></script>

5. Call the plugin

<script>
$( ".demo" ).simpleModal({ 
trigger : $( "#show_modal" ) 
});
</script>

Change log:

v0.0.7 (2013-08-03)

• fixes and updates example page

---

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