Modalizer

docs

A "modal" window is a DHTML window (i.e. a dom element floating above the page content) that prompts the user for action and, at the same time, has a layer between it and the page content that obscures the content so the user has but one choice (to perform the task in the popup).

The Modalizer class is meant to be implemented into other classes (as we do in our StickyWin classes) to provide them this functionality.

Here's a quick and simple illustration (just click anywhere to make the modal layer go away again after you execute this code): 

new Modalizer().modalShow();
execute this code

Pretty simple, right?

There are several options including things like the color and opacity of the layer, its z-index, the option to hide the layer when it's clicked, and a callback to execute when the user does this. There are a few other options (see the docs) but here's an example with a bit more configuration: 

new Modalizer().modalShow({
  modalStyle:{
    'background-color':'#d6e1b9',
    'opacity':.6
  }
});
execute this code

Using the .implement function on a class you can add modal functionality to anything you author: 

var Widget = new Class(...);
Widget.implement(new Modalizer);
Widget.modalShow();

By coupling this with the onModalHide option, you can allow your user to click anywhere on the modal layer to execute the close action both on your widget and on the layer. Here's an example using StickyWin.alert: 

StickyWin.alert("Woops!", "Oh nos! I've got five Internets open!");
execute this code

Clicking above will open a little popup (a StickyWin object) that has a modal layer. Clicking the layer will close the layer AND call the close function on the window, and vice versa (if you click the close "x" in the window, it'll close the layer).