Modal and Modalless Popup Window Using jQuery and Thickbox in ASP.Net - Part I

Here I am going to explain on how to open the popwindow using jQuery and Thickbox.


Traditional Method:

In ASP.Net, you will use javascript "window.open" method to open the popup window like.

window.open('popup.aspx','','height=220,width=500');

The above method will open a popup.aspx page as popup with respective width and height.

Cons:
1. No tight linkage between parent and child window(no clarity between parent and child window).
2. We can close the popup window without doing any operation.
3. Open as seperate window instead of in same page.


jQuery & THICKBOX:

we can avoid those cons by using jQuery and Thickbox.
For that, first we have to download the jQuery and THICKBOX js file from respective website

jQuery : http://jQuery.com
THICKBOX : http://jquery.com/demo/thickbox/

After downloaded, you have to link those js file within HTML head tag of your ASPX page like below.


<style type="text/css" media="all">@import "Assets/css/thickbox.css";</style>

<script language="javascript" src="Assets/js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="Assets/js/thickbox.js"></script>




Simple Example:
To open the image as Popup, here is the HTML code.

<a href="images/DSCN0365.JPG" alt="click here" class="thickbox"><img src="images/DSCN0365.JPG" /></a>

you have to specify class as thickbox for anchor tag to open an image in same page.

when you click the link, it will show like below.




Open seperate page as Popup window:

To open seperate page as popup window, here is html code.

<a href="childwindow.aspx?TB_iframe=true&height=250&width=400" class="thickbox" >open child window</a>

you have to specify CSS class as "thickbox" to open childwindow.aspx as popup in same page.

href="childwindow.aspx?TB_iframe=true&height=250&width=400"

TB_iframe=true -- says popup page is seperate page.
width, height -- says size of popup window.

if you click the anchor link, it will show the child window like below.



This is modalless popup window. i.e. you can close the popup window by clicking close link in popup window OR pressing ESC key.

Modal Popup:
Even, you can show the modal popup window by adding another property of "modal=true" in anchor href attribute value like below

<a href="childwindow.aspx?TB_iframe=true&height=250&width=400&modal=true" class="thickbox" >open child window</a>


if you click the above link, it will show without close link in popup window like below.



Now you can't close the popup window without pressing save button.

In next part, i will explain how to open panel in same page as popup.