JavaScript overlay using Prototype and Script.aculo.us

As part of the interface for a web application, I wrote the following code to implement a modal dialogue box in JavaScript (similar to the Lightbox effect).

While there are a few different examples of this effect that I could have used, I was after something straight-forward and lightweight with clear separation of design (CSS) and presentation logic (JavaScript).

This has been very helpful. I’m using code based on JDD’s post, and I added the ability to pass in class names for both the overlay and dialog so you can have different css styles. I have found, however, a couple of problems.

One is that every time you show the dialog, it writes a new copy into the DOM. This isn’t too much of a problem for static content, but for anything you might have to reference or submit, it won’t work. I fixed this by adding these two lines to the Hide section:

this.dialog.remove();
this.overlay.remove();

This will remove the content from the DOM as well as hiding it, much cleaner.

In the hide function, you’ll also find it more useful to .remove() instead of .hide(), because the elements, once hidden with this method, are no longer accessible and therefore needlessly pollute the DOM.

great script. If you are still monitoring this thread, could you briefly explain how to put two of these overlays in the same page? I’m new to javascript…i’ve tried putting into two div tags and adding the div id to the onclick, etc.