Frederik Vig – ASP.NET developer

Update

Thickbox is no longer supported. Use another of jQuery’s overlay/lightbox plugins. This post will remain for legacy purposes only.

I’m very found of jQuery, and use the Thickbox plugin a lot in my project. I’ve not used it much for images, but rather for content. To retrieve content you have three options.

• Inline content
• Iframed content
• Ajax content

Inline content

This is pretty straight forward, you have some content on the same page that you’d like to display inside the Thickbox. This one I use a lot, since it is easy to make accessible for search engines, screen readers and other devices. You simply hide the content with JavaScript (in jQuery you can use the hide function: $(selector).hide();), and then trigger opening the content inside the Thickbox with either a link or button.

<a href="#TB_inline?height=155&amp;width=300&amp;inlineId=contentId" class="thickbox">Show hidden content.</a>

Iframe content

<a href="Default.aspx?keepThis=true&amp;TB_iframe=true&amp;height=300&amp;width=500" title="thickbox title" class="thickbox">Iframe content</a>

The nice thing about this is that you can easily include existing pages inside the Thickbox. Another thing to note is that users without JavaScript, like search engines, still can navigate the content, since the a element’s href attribute points to the page. This is also the easiest way to still have functionality that you have inside your ASP.NET web form page like Postbacks, sessions etc.

Ajax content

Like with iframed content people without JavaScript will still be able get to the content.

<a href="ajaxContent.aspx?height=300&amp;width=300" title="thickbox title" class="thickbox">Ajax conten</a>

The one problem I’ve had in the past with this method is when posting data back to the server with ASP.NET web forms (same problem with inline content). Until recently I always used iframed content when having to deal with form controls. The reason being that the content inside the Thickbox got added outside the form element on the page (right before the closing body tag).

To fix this you need to change this line of code inside the thickbox.js file.

$("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");

Add form:first to the selector to target the first form element on the page.

$("body form:first").append("<div id='TB_overlay'></div><div id='TB_window'></div>");

Now the form controls will work and you’ll be able to have the user fill out the form inside the Thickbox and post it back to the server.

The Thickbox is also very easy to style and extend, below are some screen shots of sites where I’ve used it.

Other resources

• Master-Detail with the GridView, DetailsView and jQuery’s ThickBox
• Thickbox plugin
• jQuery

Related Posts:

• Transparent PNGs
• Using multiple forms on an ASP.NET web forms page
• ASP.NET Validation and jQuery
• Specify your preferred external URL in EPiServer
• CSS tricks – part 1