UI Widgets Overlay

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.

JavaScript
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.

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

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

Show Example:
jQuery
<div class="button" data-bind="dxButton:{text: 'Show overlay', clickAction: showOverlay}"></div>
<div id="overlayContainer" data-bind="dxOverlay: { visible: overlayVisible }">
  <div class="overlayContents">
      <p>The overlay window text.</p>
      <div class="button" data-bind="dxButton: { text: 'Hide overlay', clickAction: hideOverlay }"></div>
  </div>
</div>
overlayVisible = ko.observable(false);
showOverlay = function () {
    overlayVisible(true);
};
hideOverlay = function () {
    overlayVisible(false);
};
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}
.overlayContents{
  padding: 10px;
  border-width: 2px;
  border-style: solid;
  border-radius: 15px;
  height: 150px;
}
.dx-theme-ios .overlayContents{
  border-color:#43628D;
  background-color:#F7F7F7;
}
.dx-theme-android .overlayContents{
  border-color:#FFFFFF;
  background-color:#5F5F5F;
}
.dx-theme-win8 .overlayContents{
  border-color: #E4E4E4;
  background-color:#333333;
}

Configuration

An object defining configuration options for the dxOverlay widget.

Methods

This section describes members used to manipulate the widget.

Events

This section describes events fired by this component.