Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

The easiest way to create modal overlays I could muster

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 example
Octocat-spinner-32 src
Octocat-spinner-32 vendor
Octocat-spinner-32 README.textile
README.textile

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.

Something went wrong with that request. Please try again.