Example: Standard Module Support

This example shows how you can work either the headerContent, bodyContent, footerContent attributes, to replace content in the Overlay's standard module sections, or use the setStdModContent(section, content, where) method to insert content before, or append it after existing content in the section.

Overlay's Standard Module Support

Setting Up The YUI Instance

To create an instance of an Overlay on your page, the only module you need to request is the overlay module. The overlay module will pull in the widget, widget-stack, widget-position, widget-position-align, widget-position-constrain and widget-stdmod extensions it uses.

Note, using the overlay module, will also pull down the default CSS required for overlay, on top of which we only need to add our required look/feel CSS for the example.

Note: be sure to add the yui3-skin-sam classname to the
page's <body> element or to a parent element of the widget in order to apply
the default CSS skin. See Understanding Skinning.

<body class="yui3-skin-sam"> <!-- You need this skin class -->

Creating The Overlay From Markup

For this example, we'll create the overlay instance from markup which already exists on the page, and is shown below. We mark the existing markup with the yui3-overlay-loading class, so that we can hide it while the rich control is being instantiated:

We also set it's width and align it to the filler paragraph in the example box ("#overlay-stdmod > .filler"). We don't pass any node references to the render method, so the Overlay is rendered in the location of the contentBox provided.

Setting Content

The example provides a set of input fields, allowing the user to set content in either of the 3 standard module sections which Overlay supports using Overlay's setStdModContent method.
The content can either be inserted before, appended after, or replace existing content in the specified section.

Additionally the new content can be converted to a node instance before being added to the specified section. Although it has no impact on the example, if the new content is added as a string, innerHTML is used to insert before or append after the existing section content, removing any event listeners which may have been attached to elements inside the section.

CSS: Overlay Look/Feel

As with the other basic overlay examples, the overlay.css Sam Skin file (build/overlay/assets/skins/sam/overlay.css) provides the default functional CSS for the overlay. Namely the CSS rules to hide the overlay, and position it absolutely. However there's no default out-of-the-box look/feel applied to the Overlay widget.

The example provides it's own look and feel for the Overlay, by defining rules for the content box, header, body and footer sections: