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.
This link is not clickable while the overlay is showing
Re-open the overlay to test again
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.)
var LAZR_YUI_CONFIG = { filter: "min", base: "../../build/", modules: LAZR_MODULES, }; YUI(LAZR_YUI_CONFIG).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(); });
YUI(LAZR_YUI_CONFIG).use('lazr.overlay', function(Y) { var overlay = new Y.lazr.PrettyOverlay({ bodyContent: 'hello', headerContent: 'heading', centered: true, progressbar: true, progress: 12 }); overlay.render(); });
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
.