- Inline content
- Iframed content
- Ajax content
<a href="#TB_inline?height=155&width=300&inlineId=contentId" class="thickbox">Show hidden content.</a>
<a href="Default.aspx?keepThis=true&TB_iframe=true&height=300&width=500" title="thickbox title" class="thickbox">Iframe content</a>
<a href="ajaxContent.aspx?height=300&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.