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.


<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' });" />
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();

7 comments:

Rashed August 10, 2011 at 8:04 PM  

good job

sarwar August 10, 2011 at 8:25 PM  

great

Shams Zawoad Ratul August 10, 2011 at 8:59 PM  

Thanks

pmtamal August 11, 2011 at 12:51 AM  

cool work..

Anonymous August 11, 2011 at 2:54 AM  

I have problem about web.xml of GWT
if I write follow this its does not work
[url=http://image.free.in.th/show.php?id=4b2ef99feae803c7e36373e719536959][img]http://image.free.in.th/z/th/164untitled.png[/img][/url]

but if I write follow this it work but I think it wrong pattern
[url=http://image.free.in.th/show.php?id=fdfe84811c37be4f4cfdf8ce65818c44][img]http://image.free.in.th/z/tv/177untitled.png[/img][/url]

Can you help me sovle my problem?

thanks Nuttee from Thailand

Anonymous August 11, 2011 at 2:54 AM  
This comment has been removed by a blog administrator.
Anonymous August 11, 2011 at 2:56 AM  

I have problem about web.xml of GWT
if I write follow this its does not work
[url=http://image.free.in.th/show.php?id=4b2ef99feae803c7e36373e719536959][img]http://image.free.in.th/z/th/164untitled.png[/img][/url]

but if I write follow this it work but I think it wrong pattern
[url=http://image.free.in.th/show.php?id=fdfe84811c37be4f4cfdf8ce65818c44][img]http://image.free.in.th/z/tv/177untitled.png[/img][/url]

Can you help me sovle my problem?

thanks Nuttee from Thailand

Total Pageviews

Tags

Twitter Updates
    follow me on Twitter

    Followers