What is ThickBox?

ThickBox is inner window, like Modal Dialog just inside the web page itself and not part of the browser objects. There is events handling only into the inner window, any object but the inner window, cannot listen to events. In order to create ThickBox we will create 2 elements:

1. Screen element – an element which block any action to go into the page's objects, won't let them focus.

2. Window element – an element which contains the content of the box, it is the only object (and it children) that can listen to events because it will be on top of the screen element.

I won't build the component itself, I will explain the main idea and show snippets which help you implement and understand how the component work. If you want to build the component itself, you will require to know JavaScript, DOM and events management.

Building the screen element:

The screen element need to block action to go into the page's objects, that said it need to be on top of any of the page's elements. So it will get position:absolute;width:100%;height:100%, then we position it from the start by let it: top:0;left:0 and high z-index (say 20) for align in to the top.

For stopping actions to go into the page's objects we need to listen to the event and cancel it:

// JavaScript code:
// For standard compliance browsers:
eventObject.preventDefault();
eventObject.stopPropagation();

//For Internet Explorer:
window.event.returnValue = false;
window.event.cancelBubble = true;

Building the window element:

The window element is actually a DIV element which position on top of the screen object, so in such way it will can listen to events. So it will get position:absolute and higher z-index then the screen element. If you want to position the DIV in the middle of the page, you need to let the element: top:50% and negative margin-top with half of the element height (offsetHeight property of the element in DOM).

In this element we put the content we want to show. For example: Webmaster.org.il use Iframe in the box that connected to their content, other use this technique for showing their image galleries (named officially LightBox).

Implemntations:

Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. Using Shadowbox, website authors can display a wide assortment of media in all major browsers without navigating away from the linking page.

MUI is my implementation for this component. It is part of my UI library that based on MooTools that I develop in my spare time. In order to use the code you need to download the whole library and use the component or download from the SVN what you want.