modalBox.js

Modal window has become a very popular way of showing information in detail, and getting needed input while blocking the main application flow. There are large numbers of attractive plugin available over the internet with lot of options. But the question is do we need that all?

Fact is we only use 30 to 40 % of that plugin and for that 30 to 40 % we compromise to use a large size plugin. In internet world size matters a lot. Least the size of your page greater the loading speed.

So why not use a plugin which is much smaller and have options which we need the most. modalBox.js is a very light weight plugin packed with only most used features Its overall size is around 5.3 kb ( 2.5 kb minified).

Examples

A simplest one

$('.modalBox').modalBox();
//or
$('.modalBox').modalBox('open');

Modal box with defined width and height

$('.modalBox').modalBox({
'width':'500px',
'height':'500px'
});

Modal box with defined top and left

$('.modalBox').modalBox({
'top':'100px',
'left':'100px'
});

Modal box with all close options enable

$('.modalBox').modalBox({
  	iconImg:'images/x.png',
		iconClose:true,
		keyClose:true,
		bodyClose:true
});

Modal box with all and global close button

$('.modalBox').modalBox({
		iconImg:'images/x.png',
		keyClose:true,
		iconClose:true,
		bodyClose:true
});

Modal box with all callback functions

$('.modalBox').modalBox({
		onOpen:function(){
			alert('successfully open');
			},
		onClose:function(){
			alert('successfully close');
			}
});

Mutiple modal box functions

$('.modalBox').modalBox({
        width:300,
        height:300,
        top:100,
        left:100,
        iconImg:'images/x.png',
        iconClose:true,
});
$('.modalBox2').modalBox({
width:300,
height:300,
top:100,
left:500,
iconImg:'images/x.png',
iconClose:true,
});

Options

Options	Default	Allowed	Description
width	'auto'	Width in any unit(px,%,em)	Change the width of modal box. (Plugin will not do any calculation for width if defined.)
height	'auto'	Height in any unit(px,%,em)	Change the width of modal box. (Plugin will not do any calculation for height if defined.)
top	'auto' (50%)	Top in any unit(px,%,em)	Change the top position of modal box. (Plugin will not do any calculation for margin top if top is defined.)
left	'auto' (50%)	Left in any unit(px,%,em)	Change the left position of modal box. (Plugin will not do any calculation for margin left if left is defined.)
overlay	true	true,false	Overlay the body if overlay is true.(have class iw-modalOverlay)
iconClose	false	true,false	Show a close icon on top right corner to close modal box.
keyClose	true	true,false	Activate closing of modal box by pressing esc key while modal box is open.
bodyClose	true	true,false	Activate closing of modal box by clicking outside of modal box.
iconImg	''	Image source	Source of icon image to display. (have class iw-closeImg)

Callback functions

Function	Description
onOpen	This callback function will be fired just after modal box is successfully open.
onClose	This callback function will be fired just after modal box is successfully close.

Methods

1. Plugin Method : Passed as first argument of plugin(If need to define).
   ex: $('.modalBox').modalBox('close');

Method	Description
open	Method to open modal box. It is a default method ,so if no method is defined open will be called.
close	Method to close modal box(hide the modal box). Remove all events and element associated with modal box(except modal box itself.)

2. Global Method:
ex: $.modalBox.close();

Method	Description
close	Close all currently opened modal box. Called by $.modalBox.close().

Styling

We have three classes related to modal box.

1. iw-modalBox for modal box.
2. iw-modalOverlay for overlay.
3. iw-closeImg for close icon.

Example

.iw-modalBox{
	padding:5px;
	border:1px solid #CCC;
}
.iw-modalOverlay{
background: #000;
opacity:.6;
}