I had a situation where I needed to show a Flash movie in a modal dialog on a Page. Needless to mention, LightBox is the first thing that strikes to mind for such purposes. However, LightBox supports only images. And I needed to show a Flash movie.

A quick Google search threw up ThickBox on the top. Although ThickBox is no longer maintained by its creators, still I decided to go with it as it appeared light-weight, and I was in a hurry, without feeling like searching further.

It was not much difficult getting ThickBox on the page. The official page provides enough samples for almost all scenarios. However, my next problem was I wanted ThickBox to show up on Page Load. Again a google search revealed solutions for this for LightBox, but none for ThickBox. So, I decided to create a solution myself. It should not be much difficult after all (It actually wasn’t, but took more time to brew up, than I would have liked).

So, a close introspection of the Thickbox javascript revealed tb_show(caption, url, imageGroup) to be the magic function doing all the necessary plumbing for getting a dialog on the page. A close look at tb_init(domChunk) revealed how to call it (You should use the non-minified version of the thickbox javascript for understanding what’s all going behind the scenes).

Having figured that out, this is all what it took to show ThickBox on page load:

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }<script type=”text/javascript”>
$(document).ready(function(){
tb_show(‘Prizes Offered’, ‘#TB_inline?width=650&height=535&inlineId=hiddenModalContent&modal=true’, false);
});
</script>{/syntaxhighlighter}

Be advised that the jQuery & ThickBox javascript files should be registered on the page before this script element. You can see this at work on this page (for which I originally created it).

The only thing I have done is to call the tb_show(caption, url, imageGroup) method manually passing it the necessary config that would have been set as the href of the corresponding anchor tag. The first argument is the title you would have set on the ancor or input tag. The last argument (false) is the Group Name. As I am not using image groups here, I passed false. If you are using an image group, pass the appropriate group name.

Now the last piece of the puzzle was the Close button on the dialog. The examples on official ThickBox page make it look like that the Close button would be added to the dialog automatically. However, it wasn’t the case.

So, spent some more time to get a manual ‘Close’ button on the dialog. In the end, it was just placing the following markup somewhere inside the element whose id was passed to Thickbox as inlineId:

<a href="#" onclick="tb_remove()">Close</a>