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.

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

DevExtreme jQuery - Overview

jQuery

Angular

Vue

React

See Also