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

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;

By: Steve

Steve — Wed, 04 Jun 2008 16:33:11 +0000

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

to:

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

By: Steve

Steve — Wed, 04 Jun 2008 16:15:44 +0000

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