A widget displaying the required content in an overlay window.

Type: Object

The dxOverlay widget represents a window overlaying the current view. It displays data located within the HTML element representing the widget.

Declare an observable Boolean variable and assign it to the visible configuration option, to control widget visibility.

var overlayVisible = ko.observable(false);

To create the dxOverlay widget, add a div element with dxOverlay Knockout binding within the body of the required view.

<div data-bind="dxOverlay:{visible: overlayVisible}">
    <p>The text that should be shown in the overlaying window.</p>

Refer to the Add a widget documentation section to learn how to create widgets in detail.

Show Example:


An object defining configuration options for the dxOverlay widget.


This section describes members used to manipulate the widget.