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.

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

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

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.

<div id="overlay">
    <div id="closeButton"></div>
function hideOverlay() {
    contentReadyAction: function() {
            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:


An object defining configuration options for the dxOverlay widget.


This section describes members used to manipulate the widget.


This section describes events fired by this component.