Modal Dialog Box

Part 2 : Obtain the Script

To be able to add your own "modal dialogs" to your web page the first thing you need to do is to get the Javascript that handles the modal display. Copy the following code and save it as modaldbox.js.

Next copy the following stylesheet commands and save them as modaldbox.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 in setting things up to be able to add "modal dialogs" to your web pages is to add the following code into the head of each page where you want to apply the be able to add them.

That done now all that remains is to add the HTML andd Javascript that is required to actually use the script