DevExtreme Angular - 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.