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.
$(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...
<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.
<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.
<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
If you have technical questions, please create a support ticket in the DevExpress Support Center.