UI Widgets Popup

A widget that displays required content in a popup window.

Type: Object

The dxPopup widget is a window overlaying the current view. It displays data located inside the HTML element representing the widget. This widget is similar to the dxOverlay widget, but the popup window can have a title, and can be shown in full-screen mode. Specify the title text via the title option, and assign true to the showTitle option to display the window title. The full-screen mode's availability is specified by the fullScreen option.

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

JavaScript
var popupVisible = ko.observable(false);

To create the dxPopup widget, add a div element with dxPopup Knockout binding within the body of the required view.

HTML
<div data-bind="dxPopup:{visible: popupVisible, title: 'Employee data', showTitle: true, fullScreen:true}">
    <p>The text that should be shown in the popup window.</p>
</div>

For more information on creating widgets, refer to the Add a Widget documentation section.

The example mentioned above illustrates a popup with a simple title, specified via the title configuration option. If you need to use specific HTML code in the popup window title, create two dxTemplate elements within the widget element.

HTML
<div data-options="dxTemplate{name: 'title'}">
    <p>Popup title is <b>Employee data<b></p>
</div>
<div data-options="dxTemplate{name: 'content'}">
    <p>The text that should be shown in the popup window.</p>
</div>

The first template (called 'title') contains the HTML code of the title section. The 'content' template element contains the HTML code displayed in the main part of the popup window.

Refer to the Add a Widget documentation section to learn how to create widgets in detail.

Show Example:
jQuery
<div class="button" data-bind="dxButton:{text:'Show popup', clickAction:showPopup}"></div>
<div data-bind="dxPopup:{visible:popupVisible, fullScreen:true}">
    <div data-options="dxTemplate:{name: 'title'}">
        <p>Popup title is <b data-bind="text: popupTitle"></b></p>
        <p><span data-bind="dxCheckBox: { checked: buttonVisible }"></span>&nbsp;Show "Hide popup" button</p>
    </div>
    <div data-options="dxTemplate:{name: 'content'}">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup, visible: buttonVisible }"></div>
        <p>The popup contents.</p>
    </div>
</div>
popupTitle = "My popup";
buttonVisible = ko.observable(true);
popupVisible = ko.observable(false);
showPopup = function () {
  popupVisible(true);
};
hidePopup = function () {
  popupVisible(false);
};
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}

Configuration

An object defining configuration options for the dxPopup widget.

Methods

This section describes members used to manipulate the widget.

Events

This section describes events fired by this component.