Using YUI OverlayManager

I spend a pretty good amount of time on the YAHOO Developer Network, especially on the YUI documentation pages. And I don't recall having seen a prominent link to or a much of a mention of the YUI Overlay Manager. I stumbled across it when looking at example uses for the YUI Panel.

What is the Overlay Manager?
The Overlay Manager is used to manage the focus and state of multiple Overlays on a page. This includes Overlay subclasses such as Dialog, SimpleDialog, Tooltip, and Panel. In short; Overlay Manager makes sure the Overlay in focus is on top of the others.

I've been working on a B2B application that heavily leverages Panels for a better presentation and user experience. I was wrangling with how to allow multiple panels to be open at the same time. Early attempts left me frustrated.

Implementing OverlayManger
It took me no more than 5 minutes to get the OverlayManager working on the page. And "presto!", all registered Panels are managed with ease (and best of all no code from me).

First, you instantiate the Overlay Manager.
YAHOO.ns.myOM = new YAHOO.widget.OverlayManager();

Then, you register each rendered panel (myP) with the manager.
YAHOO.ns.myP.render();
YAHOO.ns.myOM.register(YAHOO.ns.myP);

I chose to do late registration because I saw no point in having the Manager know about every panel that MIGHT be rendered on the page. Besides, I don't instantiate the panel until the user indicates a desire to use it.

Overlay Manager works like a champ. No more than 10 lines of code later, and all of the registered panels play nice with one another!