Comments on: JavaScript overlay using Prototype and Script.aculo.us

By: Scretchy

Scretchy — Sun, 31 Jan 2010 23:08:02 +0000

Hello,
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

By: Jon Ramsbottom

Jon Ramsbottom — Thu, 26 Nov 2009 12:41:11 +0000

Your code does not work on IE 8

By: mat

mat — Wed, 25 Nov 2009 17:36:06 +0000

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.

By: Todd

Todd — Tue, 28 Apr 2009 01:10:58 +0000

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

By: Todd

Todd — Tue, 28 Apr 2009 01:09:24 +0000

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

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

By: Eric Caron

Eric Caron — Fri, 20 Feb 2009 20:00:38 +0000

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.

By: Shared Tutorials » Blog Archive » JavaScript overlay using Prototype and Script.aculo.us

Sun, 11 Jan 2009 21:19:18 +0000

[…] JavaScript overlay using Prototype and Script.aculo.us […]

By: James

James — Sat, 13 Dec 2008 02:51:44 +0000

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.

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

By: JDD

JDD — Fri, 22 Aug 2008 22:18:16 +0000

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.
http://gist.github.com/6855

By: Matt

Matt — Thu, 05 Jun 2008 08:06:44 +0000

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;