Modal Image Box

2. Obtain the Script

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. Copy the following code and save it as modalbox.js.

Next copy the following stylesheet commands and save them as modalbox.css.

The third step is to save this image as overlay.png. 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.

The final step is to add the following code into the head of each page where you want to apply the modal box effect.