zModal, An Easy to Use jQuery Modal Plugin

There are lots of jQuery modal plugin available in the web. For my current project I need one which, I can easily customize. I realized creating a modal by myself is the best way for gaining maximum freedom.

It is very simple and easy to use and customizable. You can give it a try. Here I will describe how to use it.

First download all the required files from here and include in the page.

Create a DIV and give it an id and set the display property 'none'.

<div id="modalContent" style="width:400px; display:none;">
</div>

You can insert any content between the DIV tag.

Now place a button, the onclick event of which will show the modal

<input type="button" name="name2" value="Show Modal" 
onclick="$('#modalContent').showModal();" />

Here is an example. Click on the button and a modal will pop up.

modalContent:
Click the close button to hide the modal
You can also press ESCAPE button to hide the modal

<div id="modalContent" style="width:400px; height: 150px; display: none;">
<p style="padding-left:20px;">
modalContent:
Click the close button to hide the modal
You can also press ESCAPE button to hide the modal
</p>
</div>
<input type="button" name="name2" value="Show Modal" 
onclick="$('#modalContent').showModal();" />

There are some configurable options for the modal.
setModalButtonCss : Set True if you want to display all buttons contained in the modal in a zModal style.
hideDefaultClose : Set True if you want to hide the default close button.
opacity : You can control the opacity of the background with this parameter.
bgColor : You can change the background color with this parameter.

Here is an example with all the options are set.

<div id="modalContent2" style="width:400px; display:none;">
<p>
User Name:<br />
<input id="tbUname" type="text" name="uName">
</p>
<p>
Password:<br />
<input id="tbPass" type="text" name="pass">
</p>
<p>
<input type="button" name="login" value="Login" onclick="$('#modalContent2').hideModal()" />
</p>
</div>
<input type="button" name="name" value="Show Modal 1" 
onclick="$('#modalContent2').showModal({'setModalButtonCss': 'True', 
'hideDefaultClose' : 'True', 
'opacity' : '.2', 
'bgColor' : '#7FCFF9' });" />

User Name:

Password:

Click on the button to view the example

If you want to hide your modal like the onclick event of the Login button write this code

$('#divID').hideModal();