JavaScript/jQuery Popup - Customize the Content

Specifying the Content Template

The example below shows how to create a template consisting of static (text) and dynamic (the JavaScript Button UI component) content.

jQuery
HTML
$(function() {
    $("#popupContainer").dxPopup({
        title: "JavaScript Popup Title",
        visible: true,
        contentTemplate: function (contentElement) {
            contentElement.append(
                $("<p />").text("Static Content"),
                $("<div />").attr("id", "buttonContainer").dxButton({ 
                    text: "Click me",
                    onClick: function (e) {
                        // ...
                    }
                });
            )
        }
    });
});
Angular
HTML
TypeScript
<dx-popup
    title="JavaScript Popup Title"
    [(visible)]="isPopupVisible"
    contentTemplate="popupContent">
    <div *dxTemplate="let data of 'popupContent'">
        <p>Static content</p>
        <dx-button
            text="Click me"
            (onClick)="buttonClick($event)">
        </dx-button>
    </div>
</dx-popup>
import { DxPopupModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    isPopupVisible: boolean = true;
    buttonClick (e) {
        // ...
    }
}
@NgModule({
    imports: [
        // ...
        DxPopupModule,
        DxButtonModule
    ],
    // ...
})
Vue
<template>
    <DxPopup
        v-model:visible="isPopupVisible"
        title="JavaScript Popup Title">
        <template>
            <p>Static content</p>
            <DxButton
                text="Click me"
                @click="buttonClick"
            />
        </template>
    </DxPopup>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxPopup } from 'devextreme-vue/popup';
import { DxButton } from 'devextreme-vue/button';

export default {
    components: {
        DxButton
    },
    data() {
        return {
            isPopupVisible: true
        };
    },
    methods: {
        buttonClick() {
            // ...
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { JavaScript Popup } from 'devextreme-react/popup';
import { JavaScript Button } from 'devextreme-react/button';

const renderContent = () => {
    return (
        <p>Static content</p>
        <JavaScript Button
            text="Click me"
            onClick={buttonClick}
        />
    );
}

const buttonClick = () => {
    // ...
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isPopupVisible: true
        };

        this.onHiding = this.onHiding.bind(this);
    }

    onHiding() {
        this.setState({
            isPopupVisible: false
        });
    }

    render() {
        return (
            <JavaScript Popup
                visible={this.state.isPopupVisible}
                title="JavaScript Popup Title"
                contentRender={renderContent}
                onHiding={this.onHiding}
            />
        );
    }
}

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().JavaScript Popup()
    .Title("JavaScript Popup Title")
    .Visible(true)
    .ContentTemplate(@<text>
        <p>Static content</p>
        @(Html.DevExtreme().JavaScript Button()
            .Text("Click me")
            .OnClick("button_click")
        )
    </text>)
)

<script type="text/javascript">
    function button_click(e) {
        // ...
    }
</script>

Switching Templates On the Fly

If you need to render different templates depending on a specific condition, define them inside the JavaScript Popup container using the DevExtreme dxTemplate markup component. You can switch the templates on the fly by changing the contentTemplate property's value.

jQuery
HTML
JavaScript
<div id="changeTemplateButton"></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() {
    const popup = $("#popupContainer").dxPopup({
        title: "JavaScript Popup Title",
        visible: true,
        contentTemplate: "template1"
    }).dxPopup("instance");

    $("#changeTemplateButton").dxButton({
        text: "Change the Template", 
        onClick: function (e) {
            const currentTemplate = popup.option("contentTemplate");
            popup.option("contentTemplate", currentTemplate == "template1" ? "template2" : "template1");
            popup.show();
        } 
    });
});
Angular
HTML
TypeScript
<dx-button
    text="Change the Template"
    (onClick)="changeTemplate()">
</dx-button>
<dx-popup
    title="JavaScript Popup Title"
    [(visible)]="isPopupVisible"
    [contentTemplate]="currentTemplate">
    <div *dxTemplate="let data of 'template1'">
        <p>First template</p>
    </div>
    <div *dxTemplate="let data of 'template2'">
        <p>Second template</p>
    </div>
</dx-popup>
import { DxPopupModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    currentTemplate: string = "template1";
    isPopupVisible: boolean = true;
    changeTemplate () {
        this.currentTemplate = (this.currentTemplate == "template1" ? "template2" : "template1");
        this.isPopupVisible = true;
    }
}
@NgModule({
    imports: [
        // ...
        DxPopupModule,
        DxButtonModule
    ],
    // ...
})
Vue
<template>
    <div>
        <DxPopup
            title="JavaScript Popup Title"
            v-model:visible="isPopupVisible"
            :contentTemplate="currentTemplate">
            <template #template1>
                <p>First template</p>
            </template>
            <template #template2>
                <p>Second template</p>
            </template>
        </DxPopup>
        <DxButton
            text="Change the Template"
            @click="changeTemplate"
        />
    </div>
</template>

<script>

import 'devextreme/dist/css/dx.light.css';

import { DxPopup } from 'devextreme-vue/popup';
import { DxButton } from 'devextreme-vue/button';

export default {
    components: {
        DxPopup,
        DxButton
    },
    data() {
        return {
            isPopupVisible: true,
            currentTemplate: "template1"
        };
    },
    methods: {
        changeTemplate () {
            this.currentTemplate = (this.currentTemplate === 'template1' ? 'template2' : 'template1')
        }
    }
}

</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { JavaScript Popup } from 'devextreme-react/popup';
import { JavaScript Button } from 'devextreme-react/button';

const firstTemplate = () => {
    return (
        <p>First template</p>
    );
}

const secondTemplate = () => {
    return (
        <p>Second template</p>
    );
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isPopupVisible: true,
            renderContent: firstTemplate
        };

        this.changeTemplate = this.changeTemplate.bind(this);
        this.onHiding = this.onHiding.bind(this);
    }

    changeTemplate() {
        this.setState({
            renderContent: this.state.renderContent === firstTemplate ? secondTemplate : firstTemplate
        });
    }

    onHiding() {
        this.setState({
            isPopupVisible: false
        });
    }

    render() {
        return (
            <div>
                <JavaScript Popup
                    title="JavaScript Popup Title"
                    visible={this.state.isPopupVisible}
                    onHiding={this.onHiding}
                    contentRender={this.state.renderContent}
                />
                <JavaScript Button
                    text="Change the Template"
                    onClick={this.changeTemplate}
                />
            </div>
        );
    }
}

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().JavaScript Popup()
    .ID("popup")
    .Title("JavaScript Popup Title")
    .Visible(true)
    .ContentTemplate(new TemplateName("template1"))
)

@using (Html.DevExtreme().NamedTemplate("template1")) {
    <p>First template</p>
}
@using (Html.DevExtreme().NamedTemplate("template2")) {
    <p>Second template</p>
}

@(Html.DevExtreme().JavaScript Button()
    .ID("changeTemplateButton")
    .Text("Change the Template")
    .OnClick("changeTemplateButton_click")
)

<script type="text/javascript">
    function changeTemplateButton_click() {
        const popup = $("#popup").dxPopup("instance");
        const currentTemplate = popup.option("contentTemplate");
        popup.option("contentTemplate", currentTemplate.selector == "#template1" ? $("#template2") : $("#template1"));
        popup.show();
    }
</script>
See Also

Add Scrolling

The JavaScript Popup component always displays a native scrollbar when the height of the JavaScript Popup's content is greater than that of the JavaScript Popup.

You can also implement a scrollbar that belongs to the ScrollView component. This implementation is more flexible. For example, you can enable right-to-left representation or scroll the content to a specific position. For more information about the available options, refer to the ScrollView API section.

To implement this solution, follow the steps below:

  1. Wrap the content in the ScrollView component and place it in the JavaScript Popup container.

  2. Set the height and width of the ScrollView to 100% of the popup content area. To enable this functionality, wrap content into the ScrollView component and set its height and width to 100% of the JavaScript Popup content area:

jQuery
index.js
$(function () {
    $("#popup").dxPopup({
        contentTemplate: () => {
            const content = $("<div />");
            content.dxScrollView({
                height: "100%",
                width: "100%"
            });
            return content;
        },
        // ...
    });
});
Angular
app.component.html
<dx-popup ... >
    <div *dxTemplate="let data of 'content'">
        <dx-scroll-view 
            width="100%"
            height="100%">
            <!-- ... -->
        </dx-scroll-view>
    </div>
</dx-popup>
<!-- ... -->
Vue
App.vue
<template>
    <div id="app-container">
        <DxPopup ... >
            <template #content>
                <DxScrollView
                    height="100%"
                    width="100%">
                    <!-- ... -->
                </DxScrollView>
            </template>            
        </DxPopup>
        <!-- ... -->
    </div>
</template>

<script>
// ...
import { DxScrollView } from "devextreme-vue/scroll-view";

export default {
    // ...
    components: {
        // ...
        DxScrollView
    }
}
</script>
React
App.js
// ...
import ScrollView from 'devextreme-react/scroll-view';

    const renderContent = () => {
        return (
            <>
                <ScrollView height="100%" width="100%">
                    {/* ... */}
                </ScrollView>
            </>
        )
    };

const App = () => {
    // ...
    return (
        <div className="App">
            <JavaScript Popup
                contentRender={renderContent}
            />
        </div>
    );
}

export default App;