DevExtreme Vue - Customize the Content

By default, the Popup is displayed in a windowed mode. To show it full-screen, assign true to the fullScreen option.

JavaScript
$(function() {
    $("#popupContainer").dxPopup({
        title: "Popup Title",
        visible: true, 
        fullScreen: true
    });
});

To define the Popup content, specify a template for it. You can simply put this template inside the Popup container...

HTML
<div id="popupContainer">
    <p>Popup content</p>
</div>

... or you can combine the HTML markup for the template in the contentTemplate function. Note that this function will be called only once - when the Popup appears for the first time.

JavaScript
$(function() {
    $("#popupContainer").dxPopup({
        title: "Popup Title",
        contentTemplate: function () {
            return $("<div />")
                .dxButton({ 
                    text: 'Click me',
                    onClick: function () {
                        // ...
                    }
                });
        }
    });
});

If you need to render different templates depending on a specific condition, define them inside the Popup container using the DevExtreme dxTemplate markup component. To switch the templates on-the-fly, change the value of the contentTemplate option.

HTML
JavaScript
<div id="buttonContainer"></div>
<div id="popupContainer">
    <div data-options="dxTemplate: { name: 'template1' }">
        <p>First template</p>
    </div>
    <div data-options="dxTemplate: { name: 'template2' }">
        <p>Second template</p>
    </div>
</div>
$(function() {
    var popup = $("#popupContainer").dxPopup({
        title: "Popup Title",
        contentTemplate: 'template1'
    }).dxPopup("instance");

    $("#buttonContainer").dxButton({
        text: "Change the Template", 
        onClick: function (e) {
            if (popup.option("contentTemplate") == "template1") {
                popup.option("contentTemplate", "template2");
            } else {
                popup.option("contentTemplate", "template1");
            }
            popup.show();
        } 
    });
});
See Also