Minimal jQuery Modal Windows Plugin - modalBox.js

modalBox.js is a lightweight (~2.7kb minified) jQuery modal box plugin that aims to provide a simple way to create modal windows with only most used features.

Basic Usage:

1. Create the html for the modal box with a close button

<div class="modalBox">
CONTENT
<div class="modalFooter">
FOOTER CONTENT
</div>
</div>

2. Create a button to trigger the modal window

<input id="demo" type="button" value="Click me for demo"/>

3. The CSS for the modal box

.modalBox{
padding:5px;
border:1px solid #CCC;
background:#FFF;
height:500px;
width:700px;
display:none;
}
img.iw-closeImg{
width:24px;
height:24px;
}
.modalFooter{
color:#FFF;
position:absolute;
bottom:0px;
}
.modalFooter span{
cursor:pointer;
}
.iw-modalOverlay{
background:#000;
opacity:.5;
}

4. Include required javascript files on the page

<script type="text/javascript" src="javascripts/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/modalBox-min.js"></script>

5. Call the plugin with options

$(document).ready(function(e) {
$('#demo').click(function(e) {
$('.modalBox').modalBox({
iconImg:'images/x.png',
keyClose:true,
iconClose:true,
bodyClose:true
});
});
});

6. Options

width: 'auto'	// Change the width of modal box. (Plugin will not do any calculation for width if defined.)
height: 'auto'	// Change the width of modal box. (Plugin will not do any calculation for height if defined.)
top: 'auto'	// Change the top position of modal box. (Plugin will not do any calculation for margin top if top is defined.)
left: 'auto'	// Change the left position of modal box. (Plugin will not do any calculation for margin left if left is defined.)
overlay: true	// Overlay the body if overlay is true.(have class iw-modalOverlay)
iconClose: false// Show a close icon on top right corner to close modal box.
keyClose: true	// Activate closing of modal box by pressing esc key while modal box is open.
bodyClose: true	// Activate closing of modal box by clicking outside of modal box.
iconImg: ''	// Source of icon image to display. (have class iw-closeImg)

---

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