DevExtreme React - Customize the Title

By default, the Popup allocates a part of its area to the title, regardless of whether you specified the title text or did not. To hide the title, set the showTitle option to false. Besides the text, the title area also contains a button that closes the Popup. To hide this button alone, assign false to the showCloseButton option.

JavaScript
$(function() {
    $("#popupContainer").dxPopup({
        showTitle: false,
        visible: true
    });
});

If you need to define the title completely, specify a template for it. To do this, you can use the DevExtreme dxTemplate markup component...

HTML
JavaScript
<div id="popupContainer">
    <p>Popup content</p>
    <div data-options="dxTemplate: { name: 'title' }">
        <p>Title template</p>
    </div>
</div>
$(function() {
    $("#popupContainer").dxPopup({
        titleTemplate: "title"
    });
});

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

HTML
JavaScript
<div id="popupContainer">
    <p>Popup content</p>
</div>
$(function() {
    $("#popupContainer").dxPopup({
        titleTemplate: function () {
            return $("<p />").text("Title content");
        }
    });
});

Just as you switch content templates on-the-fly, so can you do the same with title templates.

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

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