Overlay Configuration

An object defining configuration options for the dxOverlay widget.

animation

An object that defines the animation options of the widget.

Type: animation configuration
Default for android below version 4: { show: { type: "fade", duration: 400 }, hide: { type: "fade", duration: 400, to: { opacity: 0 }, from: { opacity: 1 } } }

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show overlay', clickAction: showOverlay }"></div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width: 70%" class="dx-field-label">Animation Type</div>
    <div style="width: 30%" class="dx-field-value" data-bind="dxLookup: {
      dataSource: animationTypes,
      value: animationType,
      valueChangeAction: typeChanged
    }"></div>
  </div>
</div>
<div id="myOverlay" data-bind="dxOverlay: { visible: overlayVisible, animation: animationConfig, width:'60%', height:'50%' }">
  <div class="overlayContents">
    <p>The overlay window text.</p>
    <div class="button" data-bind="dxButton: { text: 'Hide overlay', clickAction: hideOverlay }"></div>
  </div>
</div>
animationTypes = [
  "fade",
  "pop",
  "slide"
];
overlayVisible = ko.observable(false);
animationType = ko.observable(animationTypes[0]);
animationConfig = ko.observable({});
typeChanged = function () {
  switch (animationType()) {
    case "slide":
      animationConfig({
        show: { type: "slide", from: { top: -$(window).height(), opacity: 1 }, to: { top: 0 } },
        hide: { type: "slide", from: { top: 0 }, to: { top: -$(window).height() } }
      });
      break;
    case "pop":
      animationConfig({
        show: { type: "pop", from: { scale: 0, opacity: 1 }, to: { scale: 1 } },
        hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
      });
      break;
    case "fade":
      animationConfig({
        show: { type: "fade", from: 0, to: 1 },
        hide: { type: "fade", from: 1, to: 0 }
      });
      break;
    default:
      animationConfig({});
  }
}
showOverlay = function () {
  overlayVisible(true);
};
hideOverlay = function () {
  overlayVisible(false);
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}
.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;
}

clickAction

An action performed when a widget is clicked.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show overlay', clickAction: showOverlay }"></div>
<div id="overlayContainer" data-bind="dxOverlay: { visible: overlayVisible, clickAction: processClick }">
  <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);
};
processClick = function () {
  DevExpress.ui.notify("The widget has been clicked", "info", 1000);
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}
.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;
}

closeOnOutsideClick

A Boolean value specifying whether or not the widget is closed if a user clicks outside of the overlaying window.

Type: Boolean
Default Value: false

contentReadyAction

An action performed when widget content is ready.

Type: Action
Default Value: null

deferRendering

Specifies whether widget content is rendered when the widget is shown or when rendering the widget.

Type: Boolean
Default Value: true

If this option is set to true, widget content is rendered when showing the widget. Otherwise, widget content is rendered when rendering the widget.

disabled

A Boolean value specifying whether or not the widget can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the widget at runtime.

height

The height of the widget in pixels.

Type: Number|String|function
Return Value: Number|String
The widget height.
Default Value: function() { return $(window).height() * 0.8 }

The option can hold a value of the following types.

  • numeric - the height of the widget in pixels
  • string - a CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit")
  • function - a function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; })

hiddenAction

An action performed after the widget is hidden.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show overlay', clickAction: showOverlay }"></div>
<div id="overlayContainer" data-bind="dxOverlay: { visible: overlayVisible, hiddenAction: processHiding }">
  <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);
};
processHiding = function () {
  DevExpress.ui.dialog.alert("The widget has been hidden", "Action executed");
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}
.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;
}

hidingAction

An action performed before hiding the widget.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show overlay', clickAction: showOverlay }"></div>
<div id="overlayContainer" data-bind="dxOverlay: { visible: overlayVisible, hidingAction: processHiding }">
  <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);
};
processHiding = function () {
  DevExpress.ui.dialog.alert("The widget is being hidden", "Action executed");
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}
.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;
}

position

An object defining widget positioning options.

Type: position configuration
Default Value: { my: 'center', at: 'center', of: window }

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show overlay', clickAction: showOverlay }"></div>
<p style="text-align:center"><b>Position</b></p>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">my</div>
    <div class="dx-field-value" data-bind="dxLookup: { dataSource: positionValues, value: myValue }"></div>
  </div>
  <div class="dx-field">
    <div class="dx-field-label">at</div>
    <div class="dx-field-value" data-bind="dxLookup: { dataSource: positionValues, value:atValue }"></div>
  </div>
</div>
<div id="targetElement"></div>
<div id="overlay" data-bind="dxOverlay: {
  visible: overlayVisible,
  clickAction: hideOverlay, 
  height: 90,
  width: 200,
  position: {
    my: myValue(),
    at: atValue(),
    of: $('#targetElement'),
  }
}">
  <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);
atValue = ko.observable("bottom");
myValue = ko.observable("bottom");
showOverlay = function () {
  overlayVisible(true);
};
hideOverlay = function () {
  overlayVisible(false);
};
positionValues = [
  "left top",
  "top",
  "right top",
  "right",
  "right bottom",
  "bottom",
  "left bottom",
  "left",
  "center"
];
body{
  text-align: center;
}
.button{
  margin: 10px;
}
.overlayContents{
  color: darkblue;
  background-color:darkorange;
  border-radius: 15px;
  height:100%;
}
#targetElement {
  margin-top: 40px;
  display: inline-block;
  width: 80%;
  height: 170px;
  border-style: solid;
  background-color: lightgreen;
}

shading

A Boolean value specifying whether or not the main screen is inactive while the overlay is active.

Type: Boolean
Default Value: true

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show overlay', clickAction: showOverlay }"></div>
<div id="overlayContainer" data-bind="dxOverlay: { visible: overlayVisible, shading: overlayShading }">
  <div class="overlayContents">
    <p>The overlay window text.</p>
      <div class="button" data-bind="dxButton: { text: 'Hide overlay', clickAction: hideOverlay }"></div>
  </div>
</div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Shading</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: overlayShading }"></div>
  </div>
</div>
overlayVisible = ko.observable(false);
overlayShading = ko.observable(true);
showOverlay = function () {
  overlayVisible(true);
};
hideOverlay = function () {
  overlayVisible(false);
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}
.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;
}

shadingColor

Specifies the shading color.

Type: String
Default Value: ''

This option makes sense only if the shading option is set to true.

showingAction

An action performed before showing the overlay.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show overlay', clickAction: showOverlay }"></div>
<div id="overlayContainer" data-bind="dxOverlay: { visible: overlayVisible, showingAction: processShowing }">
  <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);
};
processShowing = function () {
  DevExpress.ui.dialog.alert("The widget is being shown", "Action executed");
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}
.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;
}

shownAction

An action performed after the widget is shown.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show overlay', clickAction: showOverlay }"></div>
<div id="overlayContainer" data-bind="dxOverlay: { visible: overlayVisible, shownAction: processShowing }">
  <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);
};
processShowing = function () {
  DevExpress.ui.dialog.alert("The widget has been shown", "Action executed");
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}
.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;
}

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: false

You can show and hide the widget by changing the value of an observable variable passed to this option.

Show Example:
jQuery
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Visible</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: overlayVisible }"></div>
  </div>
</div>
<div id="overlayContainer" data-bind="dxOverlay: { visible: overlayVisible, shading: false }">
  <div class="overlayContents">
    <div class="dx-fieldset">
      <div class="dx-field">
        <div class="dx-field-label">Visible</div>
        <div class="dx-field-value" data-bind="dxCheckBox: { checked: overlayVisible }"></div>
      </div>
    </div>
  </div>
</div>
overlayVisible = ko.observable(false);
body{
  text-align: center;
}
.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;
}

width

The widget width in pixels.

Type: Number|String|function
Return Value: Number|String
The widget width.
Default Value: function() {return $(window).width() * 0.8 }

The option can hold a value of the following types.

  • numeric - the widget width in pixels
  • string - a CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit")
  • function - the function returning the widget width (e.g., width:function(){ return baseWidth - 10 + "%"; })