Overlay: Stack Support
+ ++
This example shows how you can work with the zIndex attribute which the Overlay supports, to implement a simple bringToTop function. The example code also listens for changes in the zIndex attribute, which it uses to update the content of the overlay, when it is brought to the top of the stack.
Click on an Overlay, to switch it's zIndex with the highest zIndex in the stack, bringing it to the top of the stack:
+ + + + + + + +Basic Overlay Stackability (zIndex and shim support)
+ +Setting Up The YUI Instance
+ +As with the "Basic XY Positioning" example, 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-ext and widget-stdmod dependencies it has.
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.
Instantiating The Overlay
+ +For this example we'll instantiate Overlays from script, as we did for the "Extended XY Positioning" example. We'll create 6 Overlay instances and give them increasing zIndex and xy attribute values:
+ + + +We store the Overlay instances in an overlays array, which we'll later use to sort the Overlays by their zIndex values. We also setup a listener for the zIndex attribute change event, which will update the body section of the Overlay to display its new zIndex value.
Handling MouseDown Using Widget.getByNode
+ +The Widget class has a static getByNode method which can be used to retrieve Widget instances based on a node reference. The method will return the closest Widget which contains the given node.
+We'll use this method in a click listener bound to the container of the example ("#overlay-stack"). Target nodes of click events bubbled up to this example container, will be passed to the Widget.getByNode method, to see if an Overlay was clicked on.
+
If an Overlay was clicked on, we invoke the simple bringToTop method which will set the zIndex of the clicked Overlay to the highest current Overlay zIndex value.
+ +The bringToTop Implementation
+
+We use a basic comparator function to sort the array of Overlays we have. The comparator makes sure the array element we're dealing with has a WidgetStack implementation (which Overlays do) and if so, sorts them in descending zIndex attribute value order:
Once sorted, for the purposes of the example, we simply switch the zIndex of the "highest" Overlay, with the Overlay which was clicked on, giving the selected Overlay the highest zIndex value:
CSS: Overlay Look/Feel
+ +As mentioned in the "Basic XY Positioning" example, 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 and body sections:
+ +