Wednesday, February 04, 2009

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

5 comments:

Dave said...

I did same as you've guided. But it doen not work. It does open up a thick box but it does not display the textbox and other asp controls I have in the form... :(

Ayyanar said...

please follow the part I guidelines also.

Pelalusa said...

In looking to replace the ModalPopupBoxExtender, I'm trying to find out how to show a ThickBox popup window (using a DIV, not a separate page) from server-side code.

If you know how to do this, it would be great to learn how!

framadhany said...

Hi Ayyanar,

Do you manage to catch the textbox value at server side?

the value of the textbox is always empty after the button is clicked...

I haven't found the solution yet... so if you have the solution, would mind to share?

Thanks...

Pelalusa said...

Since my original post, I have made great headway using ThickBox. There are many entries on my blog about it including this one.