1. Technology

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blmodal2.htm

was emailed to:

Thanks for sharing About.com with others!

Modal Image Box

2. Obtain the Script

clr gif
Join the Discussion

Questions? Comments?

More of this Feature

Introduction

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.

transparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay image
transparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay image
transparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay image
transparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay image
transparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay image
transparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay image
transparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay image
transparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay image
transparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay image
transparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay imagetransparent grey overlay image

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.

<script type="text/javascript" src="modalbox.js">
</script>
<link rel="stylesheet" href="modalbox.css" type="text/css" />
Sample Page | Obtain the Script
See More About

©2014 About.com. All rights reserved.