Panel Example

A Panel is a configurable Overlay which behaves like a traditional OS window, and includes built-in drag & drop, a close icon, an underlay (shadow or matte) and built-in modality. To instantiate a Panel against existing markup, the constructor is very similar to the one used for Overlay. The example here is instantiated using this constructor: win = new YAHOO.widget.Panel("win", { width:"400px", fixedcenter: true, constraintoviewport: true, underlay:"shadow", close:true, visible:false, draggable:true} );

Panel, like its base classes, features dynamic configuration. Try executing the code below to change the underlay style to matte: panel.cfg.setProperty("underlay","matte");

Sprockets!
sprockets!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vel tellus quis pede congue rutrum. Proin quam. Nullam sit amet arcu. Vivamus imperdiet. Cras iaculis odio sit amet risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum volutpat laoreet metus. In vel risus non dolor gravida laoreet. Sed convallis libero ut sapien. Aliquam risus tellus, volutpat vel, tincidunt quis, tristique et, justo.

Ut feugiat, sem non hendrerit convallis, nisi lectus laoreet mauris, eget nonummy est eros a ligula. Fusce metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque adipiscing, mi in dapibus imperdiet, lacus diam auctor ligula, eu interdum nibh nibh in ligula. Aliquam euismod pulvinar dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque metus augue, ornare scelerisque, tempor eget, euismod porttitor, dui. Nulla neque. Praesent ut velit vel mi feugiat posuere. Ut mollis. Aliquam ac massa non velit posuere facilisis.

Create / Modify a Dynamic Panel
Property
Value
ID
Header
Body
Footer
Show/Hide Effect(s)
Duration: s
Visible
x position
y position
width
height
z-index
constrain to viewport
fix to center of viewport
Use iframe shim
Modal
Draggable
Show close icon
Underlay
Context element
ID:
 
Align overlay's corner to context element's corner