DevExtreme jQuery/JS - Customize the Content
By default, the Popup is displayed in a windowed mode. To show it full-screen, assign true to the fullScreen option.
$(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...
<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.
$(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.
<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
If you have technical questions, please create a support ticket in the DevExpress Support Center.