Allows client-side manipulation of elements with different stack levels.
Please refer to the topic entitled Overlays for more information about the z-index property and the mcs:style.Positioning feature. You should also refer to the notes in Overlay.
The following styles apply to ui:overlay by default.
ui|overlay {
display: block;
position: absolute;
}| Attribute | Description | Type | Default | Options | Use |
|---|---|---|---|---|---|
| initial-displayed-state | Specifies the initial displayed state of the element. Setting the value of the attribute to 'true' has no effect as that is the default initial state. Setting the value of the attribute to 'false' will prevent the element from being displayed when the page is initially loaded. Refer to Dynamic properties for further information. | xs:boolean | true | true, false | optional |
The following example illustrates the use of the ui:overlay element and the z-index property. When you click the magnifying glass, then the input field will be made visible and the overlay will grow out into the middle of the screen because its right-hand edge is fixed to the right-hand side of the screen. The z-index property specifies the stack level of the element.
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui">
<head>
<title>Overlays</title>
<style type="text/css">
.search-input {
color: black;
}
#search {
position: absolute;
right: 1px;
top: 50px;
z-index: 10;
background: gray;
}
</style>
</head>
<body>
<div>
<ui:overlay id="search">
<div>
<ui:button>
<object src="images/magnifying-glass.mimg"/>
<cf2:on event="cf2:activate">
<cf2:param name="disp" property="bar#displayed"/>
if(!disp.get()) {
disp.set(true);
} else {
disp.set(false);
}
</cf2:on>
</ui:button>
</div>
<ui:box id="bar" initial-displayed-state="false">
<xforms:model id="search">
<xforms:submission id="search-submit" action="search-result.xdime"/>
</xforms:model>
<xforms:input class="search-input" model="search" ref="query">
<xforms:label/>
</xforms:input>
<mcs:br/>
<xforms:submit model="search" submission="search-submit">
<xforms:label>Go</xforms:label>
</xforms:submit>
</ui:box>
</ui:overlay>
</div>
</body>
</html>