Modal Image Box

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 basic functionality of this script is that it automatically changes the any links on the current web page that link to images so that those images will display in the current web page rather than loading in a new page. To achieve this effect you only need to add stylesheet to the head of your web page and the JavaScript to the bottom of the page just before the </body> tag, no changes to the actual links are required.

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.

Steve at a convention in 2001 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.

To convert all of the external image links on your page so that they display in a modal box on the same page you need to install three things - some Javascript, a few lines of stylesheet commands, and an image to use for the transparent grey background.

Let's start with the Javascript. First thing you need is a copy of my $B script (if you don't already have it).


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).


The third and final JavaScript that you need is the one that specifically converts all the images into modal images.


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.

go to top

FaceBook Follow
Twitter Follow