Overlay

import {Overlay} from 'cx/widgets';

Overlays are page elements displayed on top of the main UI. Overlays include windows, message boxes, dropdowns, tooltips, etc. Overlays may be defined in the widget tree context or opened independently. In either case, overlays are appended inside the body element.

Use the style property to control the position on the page.

Contextual Overlays

Contextual overlays are defined inside the widget tree and controlled using the visible property. A contextual overlay will not be shown, unless its parent is visible.

Show Overlay

Use the inline property to specify if the overlay should be rendered inline or appended to the body element. Note that inline overlays have z-index set to a very high value to get on top of the content.

Contextual overlays

<div class="widgets">
   <Checkbox value-bind="$page.overlay">Show Overlay</Checkbox>
   <Overlay visible-bind="$page.overlay" style={{background: 'yellow', padding: '30px'}} draggable>
      This is a draggable overlay.
   </Overlay>
</div>

Copied!Cx Fiddle

Independent Overlays

Independent overlays are explicitly opened and will remain visible until explicitly closed. Independent overlays start their own application loop and require the store parameter.

If a new store instance is passed, the overlay will be completely disconnected from the main UI.

Independent Overlays

var addOverlay = store => {
    var overlay = Overlay.create(<cx>
        <Overlay style={{
            left: Math.random()*100+'%',
            top: Math.random()*100+'%',
            padding: '30px',
            border: '2px solid gray',
            background: '#efefef',
            textAlign: 'center'
        }}>
            This overlay will automatically close after 5s.
        </Overlay>
    </cx>);

    var close = overlay.open(store);

    setTimeout(close, 5000);
};
...
<Button
        onClick={(e, {store}) => { addOverlay(store); }}>
    Add Overlay
</Button>

Copied!Cx Fiddle

HINT Switch to another article, while both types of overlays are visible, and then return back to this page.

Configuration

Property	Description	Type
backdrop	Set to `true` to add a modal backdrop which will dismiss the window when clicked.	boolean
center	Set to `true` to initially place the overlay in the center of the page. This has the same effect as setting both `centerX` and `centerY` to `true`.	boolean
closeOnEscape	Set to `true` to make the window automatically close if the Esc key is pressed on the keyboard. Default value is `false`.	boolean
inline	Set to `true` to force the element to be rendered inline, instead of being appended to the body element. Inline overlays have z-index set to a very high value, to ensure they are displayed on top of the other content.	boolean
modal	Set to `true` to add a modal backdrop which masks mouse events for the rest of the page.	boolean
animate	Set to `true` to append the set `animate` state after the initial render. Appended CSS class may be used to add show/hide animations.	boolean
autoFocus	Set to `true` to automatically focus the dropdown when it's shown.	boolean
autoFocusFirstChild	Set to `true` to automatically find and focus the first chinld in the dropdown when it's shown.	boolean
baseClass	Base CSS class to be applied to the field. Defaults to `overlay`.	string
centerX	Set to `true` to initially place the overlay in the center of the page horizontally.	boolean
centerY	Set to `true` to initially place the overlay in the center of the page vertically.	boolean
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
containerStyle	Style to be applied to the overlay's container element.	string
destroyDelay	Number of milliseconds to wait, before removing the element from the DOM. Used in combination with the `animate` property.	number
dismissOnFocusOut	Set to `true` to dismiss the overlay when it loses focus.	boolean
dismissOnPopState	Set to `true` to dismiss the window if the user presses the back button in the browser.	boolean
draggable	Set to `true` to enable dragging the overlay.	boolean
focusable	Set to true to make the top level overlay element focusable.	boolean
items children	List of child elements.	array
layout	Define an inner layout.	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
onMove	A callback function which fires while the overlay is being moved around.	function
onResize	A callback function which fires while the overlay is being resized.	function
outerLayout	Defines the outer layout which wraps the widget.	widget
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
resizable	Set to `true` to enable resizing.	boolean
resizeWidth	resizeWidth	number
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean
zIndex	zIndex	number

Documentation

Overlay