From ProtoScript

Contents 1 YUI:Popup Behavior 1.1 Example 1.2 Attributes 1.3 Callbacks 1.4 Demos

YUI:Popup Behavior

Adds a Popup behavior to an element or elements.

Example

$proto('img#avatar', {
  Click: {
     onClick: {
       Popup: {
         id: 'about-bill',
          width: '510px',      
          effect: {effect:YAHOO.widget.ContainerEffect.FADE, 
                  duration: 0.2},
          hd: 'Bill Scott Yapping',
          bd: 'http://farm1.static.flickr.com/46/
              113016311_39e40803ec.jpg',
          ft: ''               
       }
     }    
  }
});

When the user clicks on the avatar img, popup a window. The window's width is 510 pixels. The window will fade in and out in 2/10 second. The title will say 'Bill Scott Yapping'. The body will contain an image (photo of Bill). The footer is empty.

Attributes

You can find the popup attributes described in more detail at Panel Configuration Properties. You can also refer to the YUI Panel Cheatsheet.

Name	Description	Default
id	Whether a "close" icon should be displayed in the header.	false
hd	Sets the Popup panel's header area to the HTML specified. If no header is present, one will be automatically created.	none
bd	Sets the Popup panel's content to the HTML specified or if set to an IMG URL an IMG is created as the body. If no body is present, one will be automatically created.	none
bdCopyFrom	Copies the HTML from another element specified by this attribute. See Selecting Elements. This is used in place of the 'bd' attribute to obtain dynamic content.	none
ft	Sets the Popup panel's content to the HTML specified. If no footer is present, one will be automatically created.	none
close	Whether a "close" icon should be displayed in the header.	false
draggable	Whether to allow the user to drag the Panel using its header.	true
underlay	Specifies the type of underlay to display under the Panel. Other options include "none", and "matte", which renders a small white matte under the Panel.	"shadow"
modal	Specifies whether the document should be shielded with a partially transparent mask to require the user to close the Panel before being able to activate any elements in the document.	false
visible	Sets whether or not the Panel is visible on the page (Panel uses the CSS "visibility" property to control this).	true
effect	Sets the ContainerEffect (one or many) that should be used when showing and hiding the Panel.	none
x	Sets the element's "left" style property.	none
y	Sets the element's "top" style property.	none
context	Allows the Overlay to be anchored to a context element. The format is: [element, elementCorner, contextCorner], where "element" is an element or element id, and the corner parameters are either "tr" (top right), "tl" (top left), "br" (bottom right), or "bl" (bottom left).	none
fixedcenter	Specifies whether the Overlay should be automatically centered in the viewport on window scroll and resize.	false
width	Sets the element's "width" style property.	none
height	Sets the element's "height" style property.	none
zIndex	Sets the element's "z-index" style property.	none
constraintoviewport	If set to true the Overlay will try to remain inside the confines of the size of viewport.	false
iframe	If set to true the Menu will have and iframe behind it to prevent other elements with a higher z-index from poking through.	false (true on IE6)

Callbacks

Name	Description
onPopup	The callback corresponding to the Popup behavior. Fired when the popup is loaded.

Demos

See Popup Demo