Popup Configuration

An object defining configuration options for the dxPopup 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 } } }
Default for iOS: { show: { type: "slide", duration: 400, from: { position: { my: "top", at: "bottom", of: window } }, to: { position: { my: "center", at: "center", of: window } } }, hide: { type: "slide", duration: 400, from: { position: { my: "center", at: "center", of: window } }, to: { position: { my: "top", at: "bottom", of: window } } } }

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show popup', clickAction: showPopup }"></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="myPopup" data-bind="dxPopup: { title: 'My Popup', visible: popupVisible, animation: animationConfig }">
      <p>The popup text.</p>
      <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
</div>
animationTypes = [
  "fade",
  "pop",
  "slide"
];
popupVisible = ko.observable(false);
animationType = ko.observable(animationTypes[0]);
animationConfig = ko.observable({});
typeChanged = function () {
  switch (animationType()) {
    case "slide":
      animationConfig({
        show: { type: "slide", from: { opacity: 1, top: -$(window).height() }, to: { top: 50 } },
        hide: { type: "slide", from: { top: 50 }, to: { top: -$(window).height() } }
      });
      break;
    case "pop":
      animationConfig({
        show: { type: "pop", from: { opacity: 1, scale: 0 }, 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({});
  }
}
showPopup = function () {
  popupVisible(true);
};
hidePopup = function () {
  popupVisible(false);
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

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 popup', clickAction: showPopup }"></div>
<div data-bind="dxPopup: { visible: popupVisible, fullScreen: true, clickAction: processClick }">
    <div data-options="dxTemplate:{name: 'content'}">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
        <p>The popup contents.</p>
    </div>
</div>
popupVisible = ko.observable(false);
showPopup = function () {
  popupVisible(true);
};
hidePopup = function () {
  popupVisible(false);
};
processClick = function () {
  DevExpress.ui.notify("The widget has been clicked", "info", 1000);
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

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.

fullScreen

A Boolean value specifying whether or not to display the widget in full-screen mode.

Type: Boolean
Default Value: false

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 popup', clickAction: showPopup }"></div>
<div data-bind="dxPopup: { visible: popupVisible, hiddenAction: processHiding }">
    <div data-options="dxTemplate:{ name: 'content' }">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
        <p>The popup contents.</p>
    </div>
</div>
popupVisible = ko.observable(false);
showPopup = function () {
    popupVisible(true);
};
hidePopup = function () {
    popupVisible(false);
};
processHiding = function () {
  DevExpress.ui.dialog.alert("The widget has been hidden", "Action executed");
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

hidingAction

An action performed before hiding the widget.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show popup', clickAction: showPopup }"></div>
<div data-bind="dxPopup: { visible: popupVisible, hidingAction: processHiding }">
    <div data-options="dxTemplate:{ name: 'content' }">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
        <p>The popup contents.</p>
    </div>
</div>
popupVisible = ko.observable(false);
showPopup = function () {
    popupVisible(true);
};
hidePopup = function () {
    popupVisible(false);
};
processHiding = function () {
  DevExpress.ui.dialog.alert("The widget is being hidden", "Action executed");
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

position

An object defining widget positioning options.

Type: position configuration
Default Value: { my: 'center', at: 'center', of: window }
Default for windows phone 8: { my: "top center", at: "top center", of: window, offset: "0 0" }

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show popup', clickAction: showPopup }"></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="myPopup" data-bind="dxPopup: {
    title: 'My Popup',
    visible: popupVisible,
    height: 170,
    width: 200,
    clickAction: hidePopup,
    position: {
        my: myValue(),
        at: atValue(),
        of: $('#targetElement'),
    }
}">
      <p>The popup text.</p>
      <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
</div>
popupVisible = ko.observable(false);
atValue = ko.observable("bottom");
myValue = ko.observable("bottom");
showPopup = function () {
    popupVisible(true);
};
hidePopup = function () {
    popupVisible(false);
};
positionValues = [
  "left top",
  "top",
  "right top",
  "right",
  "right bottom",
  "bottom",
  "left bottom",
  "left",
  "center"
];
body{
  text-align: center;
}
.button{
  margin: 10px;
}
#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 popup', clickAction: showPopup }"></div>
<div data-bind="dxPopup: { visible: popupVisible, shading: popupShading }">
    <div data-options="dxTemplate:{ name: 'content' }">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
        <p>The popup contents.</p>
    </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: popupShading }"></div>
  </div>
</div>
popupVisible = ko.observable(false);
popupShading = ko.observable(true);
showPopup = function () {
    popupVisible(true);
};
hidePopup = function () {
    popupVisible(false);
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

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 popup', clickAction: showPopup }"></div>
<div data-bind="dxPopup: { visible: popupVisible, showingAction: processShowing }">
    <div data-options="dxTemplate:{ name: 'content' }">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
        <p>The popup contents.</p>
    </div>
</div>
popupVisible = ko.observable(false);
showPopup = function () {
    popupVisible(true);
};
hidePopup = function () {
    popupVisible(false);
};
processShowing = function () {
  DevExpress.ui.dialog.alert("The widget is being shown", "Action executed");
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

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 popup', clickAction: showPopup }"></div>
<div data-bind="dxPopup: { visible: popupVisible, shownAction: processShowing }">
    <div data-options="dxTemplate:{ name: 'content' }">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
        <p>The popup contents.</p>
    </div>
</div>
popupVisible = ko.observable(false);
showPopup = function () {
    popupVisible(true);
};
hidePopup = function () {
    popupVisible(false);
};
processShowing = function () {
  DevExpress.ui.dialog.alert("The widget has been shown", "Action executed");
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

showTitle

A Boolean value specifying whether or not to display the title in the overlay window.

Type: Boolean
Default Value: true

title

The title in the overlay window.

Type: String
Default Value: ""

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: popupVisible }"></div>
  </div>
</div>
<div data-bind="dxPopup: { visible: popupVisible, title: 'My popup' }">
    <div data-options="dxTemplate:{ name: 'content' }">
        <div class="dx-field">
            <div class="dx-field-label">Visible</div>
            <div class="dx-field-value" data-bind="dxCheckBox: { checked: popupVisible }"></div>
        </div>
    </div>
</div>
popupVisible = ko.observable(false);
body{
  text-align: center;
}

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 }
Default for windows 8: "60%"

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 + "%"; })