DevExtreme jQuery - Customize the Title

By default, the JavaScript 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 JavaScript 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>JavaScript 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 JavaScript Popup appears for the first time.

HTML
JavaScript
<div id="popupContainer">
    <p>JavaScript 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>JavaScript 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