Popup

A widget that displays required content in a popup window.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

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.

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxPopup widget using the Knockout approach.

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>

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

JavaScript
var popupVisible = ko.observable(false);

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.

If you create the widget using the jQuery approach, provided that it contains one or more widgets inside, the inner widget instances should be created within a function passed to the contentReadyAction option of the dxPopup widget.

HTML
<div id="popup">
    <div id="closeButton"></div>
</div>
JavaScript
function hidePopup() {
    $("#popup").dxPopup("hide");
};
$("#popup").dxPopup({
    contentReadyAction: function() {
        $('#closeButton').dxButton({
            text: "Close",
            clickAction: hidePopup
        });
    }
});
See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
  • The dxPopup widget is related to the Collection Containers and Overlays categories. Read an overview of the features that are common for collection container widgets in the Common Tasks topic of the Collection Containers article. To learn about the features that are typical for editors, refer to the Common Tasks topic of the Overlays article.
Show Example:
jQuery

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.