Lightweight Modal Dialog Plugin - SimpleModal

SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog. The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with content provided to SimpleModal.

You might also like:

• jQuery Dialog Boxes Plugin for Bootstrap - Bootbox
• Modern Modal Dialogs - ModalBox
• Powerful jQuery Dialog Box Plugin - Zebra_Dialog
• Modal Dialog Windows Plugin - leanModal
• SimpleModal - Beautiful Popup Window Plugin

Basic Usage:

1. Include jQuery library and jQuery SimpleModal plugin on the page

<script type='text/javascript' src='js/jquery.js'></script> 
<script type='text/javascript' src='js/jquery.simplemodal.js'></script> 

2. The HTML

<a href='#' class='basic'>Demo</a>

3. The CSS

#basic-modal-content {
display: none;
}
/* Overlay */
#simplemodal-overlay {
background-color: #000;
}
/* Container */
#simplemodal-container {
height: 360px;
width: 600px;
color: #bbb;
background-color: #333;
border: 4px solid #444;
padding: 12px;
}
#simplemodal-container .simplemodal-data {
padding: 8px;
}
#simplemodal-container code {
background: #141414;
border-left: 3px solid #65B43D;
color: #bbb;
display: block;
font-size: 12px;
margin-bottom: 12px;
padding: 4px 6px 6px;
}
#simplemodal-container a {
color: #ddd;
}
#simplemodal-container a.modalCloseImg {
background: url(../img/basic/x.png) no-repeat;
width: 25px;
height: 29px;
display: inline;
z-index: 3200;
position: absolute;
top: -15px;
right: -16px;
cursor: pointer;
}
#simplemodal-container h3 {
color: #84b8d9;
}

4. The javascript

<script> 
jQuery(function ($) {

// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();

return false;
});
});
</script> 

More Example:

• Basic Example
• Confirm Example
• Contact Example
• Gallery Example
• osx Example

---

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