Modal Overlays in JavaScript

Click here to view example.

USAGE

Just call Overlay.create, passing it a “builder” function that
returns the element to put on top of the overlay.

Overlay.create(function() { return new Element(‘h1’).update(“Hello, World!”) });

Your builder function is passed a function that will cancel the
overlay. You can use it like so:

Overlay.create(function(cancel) { var element = new Element(‘div’); var content = new Element(‘p’).update(“Something good.”); var finish = new Element(‘a’, { href: ‘#’ }).update(“Cancel!”); finish.observe(‘click’, cancel); element.insert(content); element.insert(finish); return element; });

Clicking the “finish” link built above will fade the overlay and
allow the user to continue with the task at hand.

You also have access to the background overlay element. This snippet
will make the overlay opaque:

Overlay.create(function(cancel, overlay) { overlay.setOpacity(1); // Make the background DARK! var element = new Element(‘div’); var content = new Element(‘p’).update(“Something good.”); var finish = new Element(‘a’, { href: ‘#’ }).update(“Cancel!”); finish.observe(‘click’, cancel); element.insert(content); element.insert(finish); return element; });

REQUIREMENTS

• prototype.js
• effects.js (from script.aculo.us)

© Copyright 2008 Pat Nakajima. All Rights Reserved.