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

In Part I, i have explained how to open image and ASPX page as popup in parent page itself.

In this part, i am going to explain how to open panel or div as popup in same page.

HTML:

<a href="#TB_inline?inlineId=popupdiv&height=120&width=320" class="thickbox" >open child window</a>
</div>



<div id="popupdiv" style="display:none">

<table style="width: 30%">
<tr>
<td >
Comments :</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox></td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Save" /></td>
</tr>
<tr>
<td >
</td>
<td >
</td>
</tr>
</table>
</div>



you have specify href with following important property.

#TB_inline - indicates popup content present in same page.

inlineId - panel or div id that should show when clicked that link.


And also, you have to specify CSS class as "thickbox" .


Screenshot:




In next part, i will explain how to open popup window dynamically without having CSS class as "thickbox".

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.

C# Code Header Designer

Here i am going to discuss about C# code header designer. while developing the project or product, developer needs to add header to C#/VB code file depending upon the company standards.

To add header, first we will create header for one C# code file and then do the copy and paste of header with small changes for other code files.

it's time consuming process to do the copy and paste for each and every file. Even some of the company not having header so far, but if they want to add header for all projects that they were handled.it would take more time to complete.

To avoid those difficulties and time consumption, msdn developer developed one tool to add headers easily.

Screenshot:



Header Template:

/* ----------------------------------------------------------------
* [COMPANY NAME]
* ----------------------------------------------------------------
* [PRODUCT NAME]
* ----------------------------------------------------------------
* File: [AUTO:FILE]
* Author: [AUTO:AUTHOR]
* ----------------------------------------------------------------
*/



By using, we can created the template for header and configure the values for keys in template.After template is prepared, PRESS GO button to add the header to code files.

C# CODE FILE:

/* ----------------------------------------------------------------
* SPi Technologies
* ----------------------------------------------------------------
* SPiRE
* ----------------------------------------------------------------
* File: Server.cs
* Author: SPIDOM\JAyyanar
* ----------------------------------------------------------------
*/

Click here to download this tool, source code and user guide.

Intellisense for jQuery - Visual Studio 2008

Here i am going to explain on how to enable intellisense for jQuery in VS 2008.

Currently VS 2008 installation pack does not come with jQuery Intellisense. MS has plan to providing intellisense for VS 2010.

For VS 2008, MS release Hotfix for jQuery Intellisense.

Here are the steps:

Step 1:

Download hotfix and install it.


Step 2:

Download jQuery core js and doc file.

Step 3:

Add those 2 JS files in Web Site Project in same location and link those JS files in ASPX file.

After you have refered those 2 files in ASPX file, it will automatically enable Intellisense for jQuery.

CODE:

jQuery:

$(function()
{
$("#TextBox1").bind("focus", function(event)
{
if ($(this).val() == this.defaultValue)
$(this).val("");
}
);

$("#TextBox1").bind("blur", function(event)
{
if ($(this).val() == "")
$(this).val(this.defaultValue);
}
);
}
);


HTML:

First Name : <asp:TextBox ID="TextBox1" runat="server" Text="Enter First Name"></asp:TextBox>


See the screenshot: