ThickBox is a great library extension for jQuery. I use it often for showing messages and other dialogs on a page.

There are 2 things to keep in mind when you want to show inline content (that’s content on the same page/in the same DOM, e.g. in a div with display:none;) using ThickBox:

First of all, ThickBox takes an id of the container that contains the stuff you want to show in the box as an argument like this:?height=300&width=300&inlineId=myOnPageContent…here “myOnPageContent” is the id of the container. However ThickBox does not put the container element itself into the box that pops up!

Consequently you will have to surround the content of the box with another container that you then reference from your stylesheet in order to style the content of the box. Here’s an example:

Contact

...box content here...

This illustrates that “myOnPageContent” is the container ThickBox is looking for and we will use “#contact {}” to reference our elements from CSS.

Another problem is that the ThickBox CSS in thickbox.css already includes definitions for the box content, e.g. at line 9:

#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}
…and at some other places, so you either have to take this out the thickbox.css file (that’s what i do) or you overrule this with your own stylesheet definitions – watch out for the cascades!