The lazr.overlay module

Drawing a fancy border around widgets

lazr provides an overlay implementation which draws a rounded-corner, drop-shadow frame around the widget content. Closing the overlay is done by either using the close button, pressing Escape, or clicking outside the overlay. The click outside the overlay (which dismisses it) will not be passed through to the HTML underneath.

Demonstration

This link is not clickable while the overlay is showing

Re-open the overlay to test again

Subclasses: things you must know

Subclasses must call this class's bindUI if they override it: use an incantation like this.constructor.superclass.bindUI.call(this) in the subclass's bindUI.

Subclasses must implement the -hidden style for their box themselves. If you subclass PrettyOverlay as MySuperOverlay then you need to add

.yui-mysuperoverlay-hidden {
  visibility: hidden
}

to your CSS. (PrettyOverlay itself can't do this because although YUI adds .yui-prettyoverlay to the className of the boundingBox, it does not add .yui-prettyoverlay-hidden when hiding the widget.)

Usage

Subclassing (probably what you want)

YUI().use('lazr.overlay', function(Y) {

    var MyThing = function() {
        MyThing.superclass.constructor.apply(this, arguments);
    };
    Y.extend(MyThing, Y.lazr.PrettyOverlay, {
      bindUI: function() {
        // call PrettyOverlay's bindUI
        this.constructor.superclass.bindUI.call(this);
        // and do my own binding
        ...
      }
    });

    var thing = new MyThing({
      bodyContent: 'hello',
      headerContent: 'heading',
      align: {
        points: [Y.WidgetPositionExt.CC, Y.WidgetPositionExt.CC]
      },
      progressbar: true,
      progress: 12
    });
    thing.render();
});

Instantiating directly (probably not what you want)

YUI().use('lazr.overlay', function(Y) {
    var overlay = new Y.lazr.PrettyOverlay({
      bodyContent: 'hello',
      headerContent: 'heading',
      align: {
        points: [Y.WidgetPositionExt.CC, Y.WidgetPositionExt.CC]
      },
      progressbar: true,
      progress: 12
    });
    overlay.render();
});

Limitations

You can only specify progressbar: {true, false} in the initial config object; it cannot be altered once renderUI() has been called.

Your progress bar will only appear if you have headerContent.