JavaScript overlay using Prototype and

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

function DialogOverlay(content, container) {
	// Manage arguments and assign defaults,
	if (typeof container == 'undefined' ) container = document.body;
	if (null == (this.container = $(container))) throw("container is not valid");
	// Assign instance variables
	this.content = content;
	this.overlay = new Element('div', { 'class': 'overlay' }).hide();
	this.dialog = new Element('div', { 'class': 'dialog' }).hide();
	// Hide the overlay when clicked. Ignore clicks on the dialog.
	Event.observe(this.overlay, 'click', this.hide.bindAsEventListener(this));
	Event.observe(this.dialog, 'click',  function(event) { Event.stop(event) });
	// Insert the elements into the DOM
	// Content may have been hidden if it is embedded in the page;
} = function() {
	new Effect.Appear(this.overlay, { duration: 0.5,  to: 0.8 });;
	return this;
DialogOverlay.prototype.hide = function(event) {
	return this;

Adding a dialogue object to your page is simple:

<script type="text/javascript">
	var dialog = new Element('div');
	dialog.insert(new Element('h2').insert('Dialogue'));
	var overlay = new DialogOverlay(dialog);

In addition, you'll need some CSS to control the presentation of the overlay and dialogue box:

.overlay {
	width: 100%;
	height: 100%;
	background: black;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 98;
.dialog {
	width: 50%;
	min-height: 50%;
	background: white;
	position: fixed;
	top: 25%;
	left: 25%;
	z-index: 99;

I uploaded the JavaScript class (overlay.js) and made a quick example page to show it working.

Tags: , , ,

12 Responses to “JavaScript overlay using Prototype and”

  1. Steve Says:

    Cheers mate, found this useful, going to adapt it to handle content through ajax. ;)

  2. Steve Says:

    Sorry for double post, but just to add, for some reason the overlay was only working up to the last element on the page, (if the browser was bigger than content) so I change line:

    this.overlay.setStyle({ height: document.body.getHeight() + ‘px’ });


    this.overlay.setStyle({ height: ‘100%’ });

  3. Matt Says:

    Hi Steve, thanks for the feedback - glad you found it useful!

    I think I came across the height issue myself at some stage. I also changed the CSS so that the overlay position is fixed, stopping the user scrolling past the end of the overlay.

    It was able to centre the dialogue better with a fixed height and width, using negative margins to bring it back in line:

    top: 50%;
    left: 50%;
    width: 30em;
    height: 22em;
    margin: -11em 0 0 -15em;

  4. JDD Says:

    I optimized your code a bit, I didn’t test it so there could be some bugs.
    I made the dialog appear after the overlay has finished its fade-in animation.

  5. James Says:

    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 will remove the content from the DOM as well as hiding it, much cleaner.

    Also, this line that stops clicks on the dialog:

    Event.observe(this.dialog, ‘click’, function(event) { Event.stop(event) });

    also prevents radio buttons from working properly. I removed it and don’t see any difference in functionality (clicks on the dialog seem harmless).

  6. Shared Tutorials » Blog Archive » JavaScript overlay using Prototype and Says:

    […] JavaScript overlay using Prototype and […]

  7. Eric Caron Says:

    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.

  8. Todd Says:

    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.

    Here’s my snippet:

    var dialog = new Element(’div’);
    dialog.insert(new Element(’h2′).insert(’Our Focus’));
    dialog.insert(new Element(’p').insert(’Woo Hoo’));
    var overlay = new DialogOverlay(dialog);

    var dialog = new Element(’div’);
    dialog.insert(new Element(’h2′).insert(’Contact Us’));
    dialog.insert(new Element(’p').insert(’Woo Hoo’));
    var overlay = new DialogOverlay(dialog);

    Contact Us

    Clicking on Contact Us or Focus returns the second script.
    Thanks a lot.

  9. Todd Says:

    sorry for the double post, but i must not have commented my code properly so that you see everything. sorry.

  10. mat Says:

    Hi Matt,
    that’s good work :)

    If I just may insert a little remark on your code here,
    I don’t really understand the interest of stopping ‘onclick’ event propagation, if on dialog. (therefore, I’ve not yet tested with IE ;)

    And the bad point is: if you wish to use this component for displaying some form, then, you won’t be able to interact with the radio or checkboxes elements!

    So I put this comment here for other people trying it, and wondering what is happening.

    Have a nice day.

  11. Jon Ramsbottom Says:

    Your code does not work on IE 8

  12. Scretchy Says:

    i use your Script and it works very well. But i can’t add a Checkboy to my Overlay. The checkbox appears, but i can’t activate it.
    How can that be?

    MFG Scretchy

Leave a Reply