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

clickAction

An action performed when a widget is clicked.

Type: Action
Default Value: null

Show Example:
jQuery

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

hidingAction

An action performed before hiding the widget.

Type: Action
Default Value: null

Show Example:
jQuery

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

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

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

shownAction

An action performed after the widget is shown.

Type: Action
Default Value: null

Show Example:
jQuery

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

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