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;">
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.

<div id="modalContent" style="width:400px; height: 150px; display: none;">
<p style="padding-left:20px;">
Click the close button to hide the modal
You can also press ESCAPE button to hide the modal
<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;">
User Name:<br />
<input id="tbUname" type="text" name="uName">
Password:<br />
<input id="tbPass" type="text" name="pass">
<input type="button" name="login" value="Login" onclick="$('#modalContent2').hideModal()" />
<input type="button" name="name" value="Show Modal 1" 
onclick="$('#modalContent2').showModal({'setModalButtonCss': 'True', 
'hideDefaultClose' : 'True', 
'opacity' : '.2', 
'bgColor' : '#7FCFF9' });" />
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

Total Pageviews


Twitter Updates
    follow me on Twitter