DevExtreme React - Overview

The Popup widget is a pop-up window overlaying the current view.

View Demo

The following code adds a simple Popup to your page, along with a Button that invokes it. The simplest configuration of the Popup requires the content and title to be specified.

jQuery
HTML
JavaScript
<div id="popupContainer">
    <p>Popup content</p>
</div>
<div id="buttonContainer"></div>
$(function() {
    $("#popupContainer").dxPopup({
        title: "Popup Title"
    });

    $("#buttonContainer").dxButton({
        text: "Show the Popup", 
        onClick: function () {
            $("#popupContainer").dxPopup("show");
        } 
    });
});
Angular
HTML
TypeScript
<dx-popup
    title="Popup Title"
    [(visible)]="isPopupVisible">
    <div *dxTemplate="let data of 'content'">
        <p>Popup content</p>
    </div>
</dx-popup>
<dx-button
    text="Show the Popup"
    (onClick)="isPopupVisible = true">
</dx-button>
import { DxPopupModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    isPopupVisible: boolean = false;
}
@NgModule({
    imports: [
        // ...
        DxPopupModule,
        DxButtonModule
    ],
    // ...
})
Vue
<template>
    <div>
        <DxPopup
            title="Popup Title"
            :visible.sync="isPopupVisible">
            <template>
                <p>Popup content</p>
            </template>
        </DxPopup>
        <DxButton
            text="Show the Popup"
            @click="onClick"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
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: false
        };
    },
    methods: {
        onClick() {
            this.isPopupVisible = true;
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

const renderContent = () => {
    return (
        <p>Popup content</p>
    );
}

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

        this.state = {
            isPopupVisible: false
        };

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

    onClick() {
        this.setState({
            isPopupVisible: true
        });
    }

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

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

export default App;

There are several ways to specify the content of the Popup. Learn more in the Customize the Content article. The Popup can also be displayed with a toolbar. For detailed information, see the Specify Toolbar Items topic.

See Also