I got the idea for this script from Lokesh Dhakar's Lightbox script. Of course if I wanted a script that worked exactly that way I'd use that one so my version works slightly differently (also my code is a lot shorter and doesn't have quite as many features).
The script displays the new image centred in the current window with a narrow white surround. The rest of the page is greyed out and will not respond to anything until the person viewing either clicks on the image box or presses the X key on their keyboard. The effect is therefore basically to produce a modal image box over the current page.
The image to the left demonstrates the effect using a thumbnail image linked to a larger image that will display in the modal box. You don't necessarily have to use an image though as any link will work just as well. The effect is automatically applied to all links that have a destination of a gif, jpeg, or png image file. If the link has a title attribute then the text in that title will be displayed as a caption under the image.
Most of the original page should still be visible through the transparent grey background however because some browsers insist on displaying select lists, flash, and/or iframes in front of anything else all of the select, iframe, and object tag content within the page are completely hidden from view while the modal box is being displayed.
That script provides the viewport size and current scroll position in order to position the overlay image so that it prevents interaction with the rest of the page while your light box is displayed.
Next you need the modal dialog script itself (also if you don't already have it to generate other modal windows).
It is up to you whether you store these as three separate files and attach three script tags at the bottom of your page or put them all in the one file and use one script tag but if you use three separate files then the first two scripts can be used for other purposes.
Next copy the following stylesheet commands and save them as modalbox.css.
The third step is to save the grey image (at the left of this text) as overlay.png (right click on it to bring up the option to save it). While it doesn't necessarily look like a semi-transparent grey image displayed this way on the page this image will display that way when used with the script. Note that the references to this image are within the stylesheet code so if you put the image somewhere other than the same folder as the pages where you are going to use the script then you will need to change the stylesheet to reference the correct location for the image in both places where it is referenced. You can of course substitute your own semi-transparent png image if you want to use a different colour. The image needs to be defined as a semi-transparent png in order to give the appropriate effect as no other image format will allow the main content to show through. While Internet Explorer 5.5 and 6 do not correctly support transparent png files the last line in the stylesheet will apply an equivalent effect in those browsers (assuming that you have any visitors still using either of those now long dead browsers).
This article written by Stephen Chapman, Felgall Pty Ltd.