The Panel control is an extension of Overlay that is meant to behave similarly to an OS window. Unlike true browser popup windows, panels are floating DHTML elements embedded directly within the page context. The Panel control extends the functionality of Overlay, adding support for modality, drag and drop, and close/dismiss buttons. Panel includes a pre-defined stylesheet to support default look and feel characteristics.
In this tutorial, we will build two Panels. One of them will be based on existing markup; the other will be created dynamically using script. We'll pass configuration properties via the constructor to specify any non-default settings we want to use in our Panel instances.
These Panels introduce a few configuration properties. The "constraintoviewport" property, when set to true, will keep the Panel from being positioned outside of the viewport; this defends against the panel being dragged out of the viewport by the user and against the panel being moved outside the viewport by scripted changes to its x/y properties. The "draggable" property determines whether the Panel can be dragged, and the "close" property determines whether the close icon should be displayed in the header of the Panel.
The "context" property takes an array of arguments. The first argument in the array is the id of the element to which we want to anchor our Panel. In this case, that element is a div with an id of "ctx". The next two arguments specify the positioning of the Panel — "tl" and "bl" mean, "Anchor my Panel's top left corner to my context element's bottom left corner." (Other possible values include "tr" and "br" for "top right" and "bottom right", respectively.)
The markup for "panel1" is in standard module format, as is required by the Module and Overlay classes on which Panel is built. We also provide buttons to allow for easy showing and hiding of both Panels: