UI Widgets Overlay

A widget displaying the required content in an overlay window.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js
Type: Object

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

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxOverlay widget using the Knockout approach.

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

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

JavaScript
var overlayVisible = ko.observable(false);

If you create the widget using the jQuery approach, provided that it contains one or more widgets inside, the inner widget instances should be created within a function passed to the contentReadyAction option of the dxOverlay widget.

HTML
<div id="overlay">
    <div id="closeButton"></div>
</div>
JavaScript
function hideOverlay() {
    $("#overlay").dxOverlay("hide");
};
$("#overlay").dxOverlay({
    contentReadyAction: function() {
        $('#closeButton').dxButton({
            text: "Close",
            clickAction: hideOverlay
        });
    }
});
See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
  • The dxOverlay widget is related to the Overlays category. So read an overview of the features that are common for collection container widgets in the Common Tasks topic of the Overlays article.
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.