Popup Configuration

An object defining configuration options for the dxPopup widget.

animation

An object that defines the animation options of the widget.

Type: object: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:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div dx-button="{ onClick: togglePopup, text: 'Show popup' }"></div>
    <div dx-popup="{
        height: 200,
        title: 'My Popup',
        bindingOptions: {
            visible: 'visible',
            animation: { deep: false, dataPath: 'animationConfig' }
        }
    }">
        <div data-options="dxTemplate: { name: 'content' }">
            <p>The popup text.</p>
            <div dx-button="{ text: 'Hide popup', onClick: togglePopup }"></div>
        </div>
    </div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">Animation type</div>
            <div class="dx-field-value" dx-select-box="{
                items: animationTypes,
                value: 'pop',
                onValueChanged: adjustAnimation
            }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.visible = false;
    $scope.togglePopup = function () {
        $scope.visible = !$scope.visible;
    };
    $scope.animationTypes = ["pop", "fade", "slide"];
    $scope.animationConfig = {
        show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
        hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
    };
    $scope.adjustAnimation = function (e) {
        switch (e.value) {
            case "slide":
                $scope.animationConfig = {
                    show: { type: "slide", from: { opacity: 1, top: -200 }, to: { top: 0 } },
                    hide: { type: "slide", from: { top: 0 }, to: { top: -200 } }
                };
                break;
            case "pop":
                $scope.animationConfig = {
                    show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
                    hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
                };
                break;
            case "fade":
                $scope.animationConfig = {
                    show: { type: "fade", from: 0, to: 1 },
                    hide: { type: "fade", from: 1, to: 0 }
                };
                break;
            default:
                animationConfig = {};
                break;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
.dx-popup-title{
    border-bottom: solid 2px red;
    padding-bottom: 10px;
}
<div data-bind="dxButton: { onClick: togglePopup, text: 'Show popup' }"></div>
<div data-bind="dxPopup: {
    height: 200,
    title: 'My Popup',
    visible: visible,
    animation: animationConfig
}">
    <div data-options="dxTemplate: { name: 'content' }">
        <p>The popup text.</p>
        <div data-bind="dxButton: { text: 'Hide popup', onClick: togglePopup }"></div>
    </div>
</div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Animation type</div>
        <div class="dx-field-value" data-bind="dxSelectBox: {
            items: animationTypes,
            value: 'pop',
            onValueChanged: adjustAnimation
        }"></div>
    </div>
</div>
var myViewModel = {
    visible: ko.observable(false),
    togglePopup: function () {
        this.visible(!this.visible());
    },
    animationTypes: ["pop", "fade", "slide"],
    animationConfig: ko.observable({
        show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
        hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
    }),
    adjustAnimation: function (e) {
        switch (e.value) {
            case "slide":
                this.animationConfig({
                    show: { type: "slide", from: { opacity: 1, top: -200 }, to: { top: 0 } },
                    hide: { type: "slide", from: { top: 0 }, to: { top: -200 } }
                });
                break;
            case "pop":
                this.animationConfig({
                    show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
                    hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
                });
                break;
            case "fade":
                this.animationConfig({
                    show: { type: "fade", from: 0, to: 1 },
                    hide: { type: "fade", from: 1, to: 0 }
                });
                break;
            default:
                animationConfig({});
                break;
        }
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
.dx-popup-title{
    border-bottom: solid 2px red;
    padding-bottom: 10px;
}
<div id="toggleButton"></div>
<div id="myPopup"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Animation type</div>
        <div class="dx-field-value" id="animationSelector"></div>
    </div>
</div>
$("#myPopup").dxPopup({
    height: 200,
    title: "My Popup",
    contentTemplate: function (contentElement) {
        contentElement.append("<p>The popup text.</p>");
        var closeButton = $("<div>");
        contentElement.append(closeButton);
        closeButton.dxButton({
            text: "Hide popup",
            onClick: function () {
                $("#myPopup").dxPopup("instance").hide();
            }
        })
    },
    animation: {
        show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
        hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
    }
});
$("#toggleButton").dxButton({
    text: 'Show popup',
    onClick: function () {
        $("#myPopup").dxPopup("instance").show();
    }
});
$("#animationSelector").dxSelectBox({
    items: ["pop", "fade", "slide"],
    value: "pop",
    onValueChanged: function (e) {
        switch (e.value) {
            case "slide":
                $("#myPopup").dxPopup("instance").option("animation", {
                    show: { type: "slide", from: { opacity: 1, top: -200 }, to: { top: 0 } },
                    hide: { type: "slide", from: { top: 0 }, to: { top: -200 } }
                });
                break;
            case "pop":
                $("#myPopup").dxPopup("instance").option("animation", {
                    show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
                    hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
                });
                break;
            case "fade":
                $("#myPopup").dxPopup("instance").option("animation", {
                    show: { type: "fade", from: 0, to: 1 },
                    hide: { type: "fade", from: 1, to: 0 }
                });
                break;
            default:
                $("#myPopup").dxPopup("instance").option("animation", {});
                break;
        }
    }
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
.dx-popup-title{
    border-bottom: solid 2px red;
    padding-bottom: 10px;
}

buttons

Specifies items displayed on the top or bottom toolbar of the popup window.

Type: Array

This option accepts an array of items that have the same structure as toolbar items. But in addition to toolbar item fields, a buttons array item includes the toolbar field that specifies whether the item is displayed on a top or bottom toolbar. This field accepts the "top" and "bottom" values.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div class="button" dx-button="{ text:'Show popup', onClick:showPopup }"></div>
    <div dx-popup="{ 
        buttons: buttonItems,
        showCloseButton: false,
        fullScreen: true,
        bindingOptions: {
            visible:'popupVisible'
        }
    }">
        <div data-options="dxTemplate:{ name: 'content' }">
            <div class="button" dx-button="{
                text: 'Hide popup',
                onClick: hidePopup
            }"></div>
            <p>The popup content.</p>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.buttonItems = [
        { toolbar: 'top', location: 'before', widget: 'button', options: { type: 'back', text: 'Back' } },
        { toolbar: 'top', location: 'center', text: 'Products' },
        { toolbar: 'top', location: 'menu', text: 'Add' },
        { toolbar: 'top', location: 'menu', text: 'Remove' },
        { toolbar: 'top', location: 'menu', text: 'Clear' },
        { toolbar: 'bottom', location: 'before', widget: 'button', options: { text: 'Load' } },
        { toolbar: 'bottom', location: 'before', widget: 'button', options: { text: 'Save' } }
    ];
    $scope.popupVisible = false;
    $scope.showPopup = function () {
        $scope.popupVisible = true;
    };
    $scope.hidePopup = function () {
        $scope.popupVisible = false;
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}
<div class="button" data-bind="dxButton:{ text:'Show popup', onClick:showPopup }"></div>
<div data-bind="dxPopup:{
    visible:popupVisible,
    buttons: buttonItems,
    showCloseButton: false,
    fullScreen: true
}">
    <div data-options="dxTemplate:{ name: 'content'}">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', onClick: hidePopup }"></div>
        <p>The popup content.</p>
    </div>
</div>
var myViewModel = {
    buttonItems: [
        { toolbar: 'top', location: 'before', widget: 'button', options: { type: 'back', text: 'Back' } },
        { toolbar: 'top', location: 'center', text: 'Products' },
        { toolbar: 'top', location: 'menu', text: 'Add' },
        { toolbar: 'top', location: 'menu', text: 'Remove' },
        { toolbar: 'top', location: 'menu', text: 'Clear' },
        { toolbar: 'bottom', location: 'before', widget: 'button', options: { text: 'Load' } },
        { toolbar: 'bottom', location: 'before', widget: 'button', options: { text: 'Save' } }
    ],
    popupVisible: ko.observable(false),
    showPopup: function () {
        this.popupVisible(true);
    },
    hidePopup: function () {
        this.popupVisible(false);
    }
}
ko.applyBindings(myViewModel);
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}
<div class="button" id="showButton"></div>
<div id="myPopup"></div>
$("#myPopup").dxPopup({
    fullScreen: true,
    buttons: [
        { toolbar: 'top', location: 'before', widget: 'button', options: { type: 'back', text: 'Back' } },
        { toolbar: 'top', location: 'center', text: 'Products' },
        { toolbar: 'top', location: 'menu', text: 'Add' },
        { toolbar: 'top', location: 'menu', text: 'Remove' },
        { toolbar: 'top', location: 'menu', text: 'Clear' },
        { toolbar: 'bottom', location: 'before', widget: 'button', options: { text: 'Load' } },
        { toolbar: 'bottom', location: 'before', widget: 'button', options: { text: 'Save' } }
    ],
    contentTemplate: function (contentElement) {
        var hideButton = $("<div class='button' id='hideButton'>").dxButton({
            text: "Hide popup",
            onClick: function () {
                $("#myPopup").dxPopup("instance").hide();
            }
        });
        contentElement.append(hideButton);
        contentElement.append("<p>The popup content.</p>");
    }
});
$("#showButton").dxButton({
    text: 'Show popup',
    onClick: function () {
        $("#myPopup").dxPopup("instance").show();
    }
});
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}

closeOnBackButton

A Boolean value specifying whether or not the widget is closed if a user presses the Back hardware button.

Type: Boolean
Default Value: true

closeOnOutsideClick

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

Type: Boolean|function
Return Value: Boolean
The required option value.
Default Value: false

contentReadyAction

Deprecated

Use the onContentReady option instead.

contentTemplate

A template to be used for rendering widget content.

Type: String|function|DOM Node|jQuery
Function parameters:
contentElement: jQuery
The jQuery object of the widget content element.
Return Value: String|jQuery
A template name or a template container.
Default Value: "content"

This option enables you to render widget contents depending on field values of the bound data model.

HTML
<div data-options="dxTemplate: { name:'myContent' }">
    <h1 data-bind="text: title"></h1>
    <p>Full name: <span data-bind="text: fullName"></span></p>
</div>

NOTE: A binding context of a content template is the bound view model. So, you can bind template elements to the view model's fields directly (see the code above). To access another binding context within a title template, use the Knockout/Angular binding variables.

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.

dragEnabled

Specifies whether or not to allow a user to drag the popup window.

Type: Boolean
Default Value: false
Default for desktop: true

A user can drag the popup window by the title. Therefore, this option makes sense if the showTitle option is set to true.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div dx-button="{ onClick: togglePopup, text: 'Show popup' }"></div>
    <div dx-popup="{
        height: 200,
        title: 'My Popup',
        bindingOptions: {
            visible: 'visible',
            dragEnabled: 'enableDragging'
        }
    }">
        <div data-options="dxTemplate: { name: 'content' }">
            <p>The popup text.</p>
            <div dx-button="{ text: 'Hide popup', onClick: togglePopup }"></div>
        </div>
    </div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">dragEnabled</div>
            <div class="dx-field-value" dx-switch="{
                bindingOptions: {
                    value: 'enableDragging'
                }
            }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.visible = false;
    $scope.enableDragging = false;
    $scope.togglePopup = function () {
        $scope.visible = !$scope.visible;
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div data-bind="dxButton: { onClick: togglePopup, text: 'Show popup' }"></div>
<div data-bind="dxPopup: {
    height: 200,
    title: 'My Popup',
    visible: visible,
    showTitle: true,
    dragEnabled: enableDragging
}">
    <div data-options="dxTemplate: { name: 'content' }">
        <p>The popup text.</p>
        <div data-bind="dxButton: { text: 'Hide popup', onClick: togglePopup }"></div>
    </div>
</div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">dragEnabled</div>
        <div class="dx-field-value" data-bind="dxSwitch: {
            value: enableDragging
        }"></div>
    </div>
</div>
var myViewModel = {
    visible: ko.observable(false),
    enableDragging: ko.observable(false),
    togglePopup: function () {
        this.visible(!this.visible());
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div id="toggleButton"></div>
<div id="myPopup"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">dragEnabled</div>
        <div class="dx-field-value" id="dragSelector"></div>
    </div>
</div>
$("#myPopup").dxPopup({
    height: 200,
    title: "My Popup",
    dragEnabled: false,
    contentTemplate: function (contentElement) {
        contentElement.append("<p>The popup text.</p>");
        var closeButton = $("<div>");
        contentElement.append(closeButton);
        closeButton.dxButton({
            text: "Hide popup",
            onClick: function () {
                $("#myPopup").dxPopup("instance").hide();
            }
        })
    }
});
$("#toggleButton").dxButton({
    text: 'Show popup',
    onClick: function () {
        $("#myPopup").dxPopup("instance").show();
    }
});
$("#dragSelector").dxSwitch({
    value: false,
    onValueChanged: function (e) {
        $("#myPopup").dxPopup("instance").option("dragEnabled", e.value);
    }
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}

focusStateEnabled

Specifies whether or not the widget can be focused.

Type: Boolean
Default Value: false

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.

  • number
    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

Deprecated

Use the onHidden option instead.

hidingAction

Deprecated

Use the onHiding option instead.

hint

Specifies the text of the hint displayed for the widget.

Type: String
Default Value: undefined

hoverStateEnabled

A Boolean value specifying whether or not the widget changes its state when being hovered by an end user.

Type: Boolean
Default Value: false

onContentReady

A handler for the contentReady event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action when widget content is ready.

onDisposing

A handler for the disposing event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action when you dispose of this component.

onHidden

A handler for the hidden event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action after the widget is hidden.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div dx-button="{ onClick: togglePopup, text: 'Show popup' }"></div>
    <div dx-popup="{
        height: 200,
        title: 'My Popup',
        onShown: popupShown,
        onHidden: popupHidden,
        bindingOptions: {
            visible: 'visible'
        }
    }">
        <div data-options="dxTemplate: { name: 'content' }">
            <p>The popup text.</p>
            <div dx-button="{ text: 'Hide popup', onClick: togglePopup }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.visible = false;
    $scope.togglePopup = function () {
        $scope.visible = !$scope.visible;
    };
    $scope.popupShown = function () {
        DevExpress.ui.notify("Popup is shown", "success", 1500);
    };
    $scope.popupHidden = function () {
        DevExpress.ui.notify("Popup is hidden", "error", 1500);
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div data-bind="dxButton: { onClick: togglePopup, text: 'Show popup' }"></div>
<div data-bind="dxPopup: {
    height: 200,
    title: 'My Popup',
    visible: visible,
    showTitle: true,
    onShown: popupShown,
    onHidden: popupHidden
}">
    <div data-options="dxTemplate: { name: 'content' }">
        <p>The popup text.</p>
        <div data-bind="dxButton: { text: 'Hide popup', onClick: togglePopup }"></div>
    </div>
</div>
var myViewModel = {
    visible: ko.observable(false),
    togglePopup: function () {
        this.visible(!this.visible());
    },
    popupShown: function () {
        DevExpress.ui.notify("Popup is shown", "success", 1500);
    },
    popupHidden: function () {
        DevExpress.ui.notify("Popup is hidden", "error", 1500);
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div id="toggleButton"></div>
<div id="myPopup"></div>
$("#myPopup").dxPopup({
    height: 200,
    title: "My Popup",
    contentTemplate: function (contentElement) {
        contentElement.append("<p>The popup text.</p>");
        var closeButton = $("<div>");
        contentElement.append(closeButton);
        closeButton.dxButton({
            text: "Hide popup",
            onClick: function () {
                $("#myPopup").dxPopup("instance").hide();
            }
        })
    },
    onShown: function () {
        DevExpress.ui.notify("Popup is shown", "success", 1500);
    },
    onHidden: function () {
        DevExpress.ui.notify("Popup is hidden", "error", 1500);
    }
});
$("#toggleButton").dxButton({
    text: 'Show popup',
    onClick: function () {
        $("#myPopup").dxPopup("instance").show();
    }
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}

onHiding

A handler for the hiding event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
cancel: Boolean
Indicates whether to cancel hiding the overlay.
Default Value: null

Assign a function to perform a custom action before hiding the widget.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div dx-button="{ onClick: togglePopup, text: 'Show popup' }"></div>
    <div dx-popup="{
        height: 200,
        title: 'My Popup',
        onShowing: popupShowing,
        onHiding: popupHiding,
        bindingOptions: {
            visible: 'visible'
        }
    }">
        <div data-options="dxTemplate: { name: 'content' }">
            <p>The popup text.</p>
            <div dx-button="{ text: 'Hide popup', onClick: togglePopup }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.visible = false;
    $scope.togglePopup = function () {
        $scope.visible = !$scope.visible;
    };
    $scope.popupShowing = function () {
        DevExpress.ui.notify("Popup is being shown now", "success", 1500);
    };
    $scope.popupHiding = function () {
        DevExpress.ui.notify("Popup is being hidden now", "error", 1500);
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div data-bind="dxButton: { onClick: togglePopup, text: 'Show popup' }"></div>
<div data-bind="dxPopup: {
    height: 200,
    title: 'My Popup',
    visible: visible,
    showTitle: true,
    onShowing: popupShowing,
    onHiding: popupHiding
}">
    <div data-options="dxTemplate: { name: 'content' }">
        <p>The popup text.</p>
        <div data-bind="dxButton: { text: 'Hide popup', onClick: togglePopup }"></div>
    </div>
</div>
var myViewModel = {
    visible: ko.observable(false),
    togglePopup: function () {
        this.visible(!this.visible());
    },
    popupShowing: function () {
        DevExpress.ui.notify("Popup is being shown now", "success", 1500);
    },
    popupHiding: function () {
        DevExpress.ui.notify("Popup is being hidden now", "error", 1500);
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div id="toggleButton"></div>
<div id="myPopup"></div>
$("#myPopup").dxPopup({
    height: 200,
    title: "My Popup",
    contentTemplate: function (contentElement) {
        contentElement.append("<p>The popup text.</p>");
        var closeButton = $("<div>");
        contentElement.append(closeButton);
        closeButton.dxButton({
            text: "Hide popup",
            onClick: function () {
                $("#myPopup").dxPopup("instance").hide();
            }
        })
    },
    onShowing: function () {
        DevExpress.ui.notify("Popup is being shown now", "success", 1500);
    },
    onHiding: function () {
        DevExpress.ui.notify("Popup is being hidden now", "error", 1500);
    }
});
$("#toggleButton").dxButton({
    text: 'Show popup',
    onClick: function () {
        $("#myPopup").dxPopup("instance").show();
    }
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}

onOptionChanged

A handler for the optionChanged event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
value: any
Specifies a new value for the option.
Default Value: null

Assign a function to perform a custom action after an option of the component is changed.

onShowing

A handler for the showing event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action before showing the widget.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div dx-button="{ onClick: togglePopup, text: 'Show popup' }"></div>
    <div dx-popup="{
        height: 200,
        title: 'My Popup',
        onShowing: popupShowing,
        onHiding: popupHiding,
        bindingOptions: {
            visible: 'visible'
        }
    }">
        <div data-options="dxTemplate: { name: 'content' }">
            <p>The popup text.</p>
            <div dx-button="{ text: 'Hide popup', onClick: togglePopup }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.visible = false;
    $scope.togglePopup = function () {
        $scope.visible = !$scope.visible;
    };
    $scope.popupShowing = function () {
        DevExpress.ui.notify("Popup is being shown now", "success", 1500);
    };
    $scope.popupHiding = function () {
        DevExpress.ui.notify("Popup is being hidden now", "error", 1500);
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div data-bind="dxButton: { onClick: togglePopup, text: 'Show popup' }"></div>
<div data-bind="dxPopup: {
    height: 200,
    title: 'My Popup',
    visible: visible,
    showTitle: true,
    onShowing: popupShowing,
    onHiding: popupHiding
}">
    <div data-options="dxTemplate: { name: 'content' }">
        <p>The popup text.</p>
        <div data-bind="dxButton: { text: 'Hide popup', onClick: togglePopup }"></div>
    </div>
</div>
var myViewModel = {
    visible: ko.observable(false),
    togglePopup: function () {
        this.visible(!this.visible());
    },
    popupShowing: function () {
        DevExpress.ui.notify("Popup is being shown now", "success", 1500);
    },
    popupHiding: function () {
        DevExpress.ui.notify("Popup is being hidden now", "error", 1500);
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div id="toggleButton"></div>
<div id="myPopup"></div>
$("#myPopup").dxPopup({
    height: 200,
    title: "My Popup",
    contentTemplate: function (contentElement) {
        contentElement.append("<p>The popup text.</p>");
        var closeButton = $("<div>");
        contentElement.append(closeButton);
        closeButton.dxButton({
            text: "Hide popup",
            onClick: function () {
                $("#myPopup").dxPopup("instance").hide();
            }
        })
    },
    onShowing: function () {
        DevExpress.ui.notify("Popup is being shown now", "success", 1500);
    },
    onHiding: function () {
        DevExpress.ui.notify("Popup is being hidden now", "error", 1500);
    }
});
$("#toggleButton").dxButton({
    text: 'Show popup',
    onClick: function () {
        $("#myPopup").dxPopup("instance").show();
    }
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}

onShown

A handler for the shown event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action after the widget is shown.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div dx-button="{ onClick: togglePopup, text: 'Show popup' }"></div>
    <div dx-popup="{
        height: 200,
        title: 'My Popup',
        onShown: popupShown,
        onHidden: popupHidden,
        bindingOptions: {
            visible: 'visible'
        }
    }">
        <div data-options="dxTemplate: { name: 'content' }">
            <p>The popup text.</p>
            <div dx-button="{ text: 'Hide popup', onClick: togglePopup }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.visible = false;
    $scope.togglePopup = function () {
        $scope.visible = !$scope.visible;
    };
    $scope.popupShown = function () {
        DevExpress.ui.notify("Popup is shown", "success", 1500);
    };
    $scope.popupHidden = function () {
        DevExpress.ui.notify("Popup is hidden", "error", 1500);
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div data-bind="dxButton: { onClick: togglePopup, text: 'Show popup' }"></div>
<div data-bind="dxPopup: {
    height: 200,
    title: 'My Popup',
    visible: visible,
    showTitle: true,
    onShown: popupShown,
    onHidden: popupHidden
}">
    <div data-options="dxTemplate: { name: 'content' }">
        <p>The popup text.</p>
        <div data-bind="dxButton: { text: 'Hide popup', onClick: togglePopup }"></div>
    </div>
</div>
var myViewModel = {
    visible: ko.observable(false),
    togglePopup: function () {
        this.visible(!this.visible());
    },
    popupShown: function () {
        DevExpress.ui.notify("Popup is shown", "success", 1500);
    },
    popupHidden: function () {
        DevExpress.ui.notify("Popup is hidden", "error", 1500);
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div id="toggleButton"></div>
<div id="myPopup"></div>
$("#myPopup").dxPopup({
    height: 200,
    title: "My Popup",
    contentTemplate: function (contentElement) {
        contentElement.append("<p>The popup text.</p>");
        var closeButton = $("<div>");
        contentElement.append(closeButton);
        closeButton.dxButton({
            text: "Hide popup",
            onClick: function () {
                $("#myPopup").dxPopup("instance").hide();
            }
        })
    },
    onShown: function () {
        DevExpress.ui.notify("Popup is shown", "success", 1500);
    },
    onHidden: function () {
        DevExpress.ui.notify("Popup is hidden", "error", 1500);
    }
});
$("#toggleButton").dxButton({
    text: 'Show popup',
    onClick: function () {
        $("#myPopup").dxPopup("instance").show();
    }
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}

onTitleRendered

A handler for the titleRendered event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
titleElement: jQuery
The HTML element of the item title.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action after a collection item title is rendered.

position

An object defining widget positioning options.

Type: object: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:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div dx-button="{ onClick: togglePopup, text: 'Show popup' }"></div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">my</div>
            <div class="dx-field-value" dx-select-box="{ 
                dataSource: positionValues,
                bindingOptions: {
                    value: 'myValue'
                }
            }"></div>
        </div>
        <div class="dx-field">
            <div class="dx-field-label">at</div>
            <div class="dx-field-value" dx-select-box="{ 
                dataSource: positionValues,
                bindingOptions: {
                    value: 'atValue'
                }
            }"></div>
        </div>
    </div>
    <div id="targetElement"></div>
    <div dx-popup="{
        height: 120,
        width: 150,
        shading: false,
        showTitle: false,
        closeOnOutsideClick: true,
        position: {
            of: '#targetElement'
        },
        bindingOptions: {
            visible: 'visible',
            'position.my': 'myValue',
            'position.at': 'atValue'
        }
    }">
        <div data-options="dxTemplate: { name: 'content' }">
            <p>The popup text.</p>
            <div dx-button="{ text: 'Hide popup', onClick: togglePopup }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.visible = false;
    $scope.togglePopup = function () {
        $scope.visible = !$scope.visible;
    };
    $scope.positionValues = ["left top", "top", "right top", "right", "right bottom", "bottom", "left bottom", "left", "center"];
    $scope.atValue = "bottom";
    $scope.myValue = "bottom";
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
#targetElement {
    margin-top: 40px;
    display: inline-block;
    width: 80%;
    height: 170px;
    border-style: solid;
    background-color: lightgreen;
}
<div data-bind="dxButton: { onClick: togglePopup, text: 'Show popup' }"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">my</div>
        <div class="dx-field-value" data-bind="dxSelectBox: { 
            dataSource: positionValues,
            value: myValue
        }"></div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">at</div>
        <div class="dx-field-value" data-bind="dxSelectBox: { 
            dataSource: positionValues,
            value: atValue
        }"></div>
    </div>
</div>
<div id="targetElement"></div>
<div data-bind="dxPopup: {
    height: 120,
    width: 150,
    shading: false,
    showTitle: false,
    closeOnOutsideClick: true,
    visible: visible,
    position: {
        my: myValue,
        at: atValue,
        of: '#targetElement'
    }
}">
    <div data-options="dxTemplate: { name: 'content' }">
        <p>The popup text.</p>
        <div data-bind="dxButton: { text: 'Hide popup', onClick: togglePopup }"></div>
    </div>
</div>

var myViewModel = {
    visible: ko.observable(false),
    togglePopup: function () {
        this.visible(!this.visible());
    },
    positionValues: ["left top", "top", "right top", "right", "right bottom", "bottom", "left bottom", "left", "center"],
    atValue: ko.observable("bottom"),
    myValue: ko.observable("bottom")
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
#targetElement {
    margin-top: 40px;
    display: inline-block;
    width: 80%;
    height: 170px;
    border-style: solid;
    background-color: lightgreen;
}
<div id="toggleButton"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">my</div>
        <div class="dx-field-value" id="mySelector"></div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">at</div>
        <div class="dx-field-value" id="atSelector"></div>
    </div>
</div>
<div id="targetElement"></div>
<div id="myPopup"></div>
$("#myPopup").dxPopup({
    height: 120,
    width: 150,
    shading: false,
    showTitle: false,
    closeOnOutsideClick: true,
    position: {
        my: "bottom",
        at: "bottom",
        of: '#targetElement'
    },
    contentTemplate: function (contentElement) {
        contentElement.append("<p>The popup text.</p>");
        var closeButton = $("<div>");
        contentElement.append(closeButton);
        closeButton.dxButton({
            text: "Hide popup",
            onClick: function () {
                $("#myPopup").dxPopup("instance").hide();
            }
        })
    }
});
$("#toggleButton").dxButton({
    text: 'Show popup',
    onClick: function () {
        $("#myPopup").dxPopup("instance").show();
    }
});
var positionValues = ["left top", "top", "right top", "right", "right bottom", "bottom", "left bottom", "left", "center"];
$("#mySelector").dxSelectBox({
    items: positionValues,
    value: "bottom",
    onValueChanged: function (e) {
        $("#myPopup").dxPopup("instance").option("position.my", e.value);
    }
});
$("#atSelector").dxSelectBox({
    items: positionValues,
    value: "bottom",
    onValueChanged: function (e) {
        $("#myPopup").dxPopup("instance").option("position.at", e.value);
    }
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
#targetElement {
    margin-top: 40px;
    display: inline-block;
    width: 80%;
    height: 170px;
    border-style: solid;
    background-color: lightgreen;
}

rtlEnabled

Specifies whether or not the current component supports a right-to-left representation.

Type: Boolean
Default Value: false

If you need to switch the display of this DevExtreme component to right-to-left, enable a specifically designed configuration option - rtlEnabled. When this option is set to true, the text flows from right to left, and the layout the component's elements is reversed. To switch the entire application/site to a right-to-left representation, use the static DevExpress.rtlEnabled field.

shading

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

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div dx-button="{ onClick: togglePopup, text: 'Show popup' }"></div>
    <div dx-popup="{
        height: 200,
        title: 'My Popup',
        bindingOptions: {
            visible: 'visible',
            shading: 'shadeScreen'
        }
    }">
        <div data-options="dxTemplate: { name: 'content' }">
            <p>The popup text.</p>
            <div dx-button="{ text: 'Hide popup', onClick: togglePopup }"></div>
        </div>
    </div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">shading</div>
            <div class="dx-field-value" dx-switch="{
                bindingOptions: {
                    value: 'shadeScreen'
                }
            }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.visible = false;
    $scope.shadeScreen = true;
    $scope.togglePopup = function () {
        $scope.visible = !$scope.visible;
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div data-bind="dxButton: { onClick: togglePopup, text: 'Show popup' }"></div>
<div data-bind="dxPopup: {
    height: 200,
    title: 'My Popup',
    visible: visible,
    showTitle: true,
    shading: shadeScreen
}">
    <div data-options="dxTemplate: { name: 'content' }">
        <p>The popup text.</p>
        <div data-bind="dxButton: { text: 'Hide popup', onClick: togglePopup }"></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="dxSwitch: {
            value: shadeScreen
        }"></div>
    </div>
</div>
var myViewModel = {
    visible: ko.observable(false),
    shadeScreen: ko.observable(true),
    togglePopup: function () {
        this.visible(!this.visible());
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div id="toggleButton"></div>
<div id="myPopup"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">shading</div>
        <div class="dx-field-value" id="shadingSelector"></div>
    </div>
</div>
$("#myPopup").dxPopup({
    height: 200,
    title: "My Popup",
    shading: true,
    contentTemplate: function (contentElement) {
        contentElement.append("<p>The popup text.</p>");
        var closeButton = $("<div>");
        contentElement.append(closeButton);
        closeButton.dxButton({
            text: "Hide popup",
            onClick: function () {
                $("#myPopup").dxPopup("instance").hide();
            }
        })
    }
});
$("#toggleButton").dxButton({
    text: 'Show popup',
    onClick: function () {
        $("#myPopup").dxPopup("instance").show();
    }
});
$("#shadingSelector").dxSwitch({
    value: true,
    onValueChanged: function (e) {
        $("#myPopup").dxPopup("instance").option("shading", e.value);
    }
});
body{
    text-align: center;
}
.dx-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.

showCloseButton

Specifies whether or not the widget displays the Close button.

Type: Boolean
Default Value: false
Default for desktop: true

NOTE: The option makes sense only if the showTitle option is set to true.

showingAction

Deprecated

Use the onShowing option instead.

shownAction

Deprecated

Use the onShown option instead.

showTitle

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

Type: Boolean
Default Value: true

tabIndex

Specifies the widget tab index.

Type: Number
Default Value: 0

title

The title in the overlay window.

Type: String
Default Value: ""

NOTE: If the title option is specified, the titleTemplate option value is ignored.

titleTemplate

A template to be used for rendering the widget title.

Type: String|function|DOM Node|jQuery
Function parameters:
titleElement: jQuery
An HTML element containing the rendered title.
Return Value: String|DOM Node|jQuery
A template name or a template container.
Default Value: "title"

This option enables you to render the widget title depending on field values of the bound data model.

HTML
<div data-options="dxTemplate: { name:'myTitle' }">
    <h3><span data-bind="text: title"></span> info</h3>
</div>

NOTE: A binding context of a title template is the bound view model. So, you can bind template elements to the view model's fields directly (see the code above). To access another binding context within a title template, use the Knockout/Angular binding variables.

NOTE: The titleTemplate option makes sense if the title option is undefined.

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:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div dx-button="{ onClick: togglePopup, text: 'Show popup' }"></div>
    <div dx-popup="{
        height: 200,
        title: 'My Popup',
        bindingOptions: {
            visible: 'visible'
        }
    }">
        <div data-options="dxTemplate: { name: 'content' }">
            <p>The popup text.</p>
            <div dx-button="{ text: 'Hide popup', onClick: togglePopup }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.visible = false;
    $scope.togglePopup = function () {
        $scope.visible = !$scope.visible;
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div data-bind="dxButton: { onClick: togglePopup, text: 'Show popup' }"></div>
<div data-bind="dxPopup: {
    height: 200,
    title: 'My Popup',
    visible: visible
}">
    <div data-options="dxTemplate: { name: 'content' }">
        <p>The popup text.</p>
        <div data-bind="dxButton: { text: 'Hide popup', onClick: togglePopup }"></div>
    </div>
</div>
var myViewModel = {
    visible: ko.observable(false),
    togglePopup: function () {
        this.visible(!this.visible());
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div id="toggleButton"></div>
<div id="myPopup"></div>
$("#myPopup").dxPopup({
    height: 200,
    title: "My Popup",
    contentTemplate: function (contentElement) {
        contentElement.append("<p>The popup text.</p>");
        var closeButton = $("<div>");
        contentElement.append(closeButton);
        closeButton.dxButton({
            text: "Hide popup",
            onClick: function () {
                $("#myPopup").dxPopup("instance").hide();
            }
        })
    }
});
$("#toggleButton").dxButton({
    text: 'Show popup',
    onClick: function () {
        $("#myPopup").dxPopup("instance").option("visible", true);
    }
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}

width

The widget width in pixels.

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

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