Vue Popup - Getting Started

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your Angular, Vue, React, or jQuery application.

The Popup displays content in a window that overlays the current view.

This tutorial explains how to add a Popup to a page, define its content, and configure its core features. The following control demonstrates the result:

Each section in this tutorial covers a single configuration step. You can also find the full code in the following GitHub repository: Getting Started with Popup.

Create a Popup

jQuery

Add DevExtreme to your jQuery application and use the following code to create a Popup:

index.js

index.html

$(function () {
    $('#popup').dxPopup({
        // Configuration goes here
    });
});

<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.1.11/css/dx.common.css">
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.1.11/css/dx.light.css">
        <link rel="stylesheet" href="index.css">

        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/21.1.11/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body class="dx-viewport">
        <div id="container">
            <div id="button"></div>
            <div id="popup"></div>
        </div>
    </body>
</html>

Angular

Add DevExtreme to your Angular application and use the following code to create a Popup:

app.component.html

app.component.ts

app.module.ts

<dx-popup id="popup"
    <!-- Configuration goes here -->
>
</dx-popup>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxPopupModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPopupModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

Add DevExtreme to your Vue application and use the following code to create a Popup:

App.vue

<template>
    <div id="app-container">
        <DxPopup id="popup">
            <!-- Configuration goes here -->
        </DxPopup>
    </div>
</template>

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

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

export default {
    components: {
        DxPopup
    }
}
</script>

React

Add DevExtreme to your React application and use the following code to create a Popup:

App.js

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

const App = () =>  {
    return (
        <div className="App">
            <Popup id="popup">
                {/* Configuration goes here */}
            </Popup>
        </div>
    );
}

export default App;

Add Content to the Popup

You can define static content in the Popup's markup or use the contentTemplate when the content is dynamic. In the code below, the content is static but we use contentTemplate as dynamic content will be added at a later stage.

jQuery

index.js

$(function () {
    $("#popup").dxPopup({
        contentTemplate: () => {
            const content = $("<div />");
            content.append(
                $("<img />").attr("src", "./images/dx-logo.png"),
                $(popupText)
            );
            return content;
        },
    });
    const popupText = `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Penatibus et magnis dis parturient. Eget dolor morbi non arcu risus. Tristique magna sit amet purus gravida quis blandit.
    Auctor urna nunc id cursus metus aliquam eleifend mi in. Tellus orci ac auctor augue mauris augue neque gravida. Nullam vehicula ipsum a arcu.
    Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Cursus in hac habitasse platea dictumst. Egestas dui id ornare arcu.
    Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim.</p>

    <p>Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Neque volutpat ac tincidunt vitae semper quis lectus.
    Sed sed risus pretium quam vulputate dignissim suspendisse in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar.
    Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Amet cursus sit amet dictum sit amet justo donec enim.
    Vestibulum rhoncus est pellentesque elit ullamcorper. Id aliquet risus feugiat in ante metus dictum at.</p>`;
});

Angular

app.component.html

<dx-popup
    contentTemplate="popup-content">
    <div *dxTemplate="let data of 'popup-content'">
        <img src="assets/images/dx-logo.png" alt="logo">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Penatibus et magnis dis parturient. Eget dolor morbi non arcu risus. Tristique magna sit amet purus gravida quis blandit.
            Auctor urna nunc id cursus metus aliquam eleifend mi in. Tellus orci ac auctor augue mauris augue neque gravida. Nullam vehicula ipsum a arcu.
            Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Cursus in hac habitasse platea dictumst. Egestas dui id ornare arcu.
            Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim.
        </p>
        <p>
            Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Neque volutpat ac tincidunt vitae semper quis lectus.
            Sed sed risus pretium quam vulputate dignissim suspendisse in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar.
            Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Amet cursus sit amet dictum sit amet justo donec enim.
            Vestibulum rhoncus est pellentesque elit ullamcorper. Id aliquet risus feugiat in ante metus dictum at.
        </p>
    </div>
</dx-popup>

Vue

App.vue

<template>
    <div id="app-container">
        <DxPopup
            content-template="popup-content">
            <template #popup-content>
                <img src="./assets/dx-logo.png" alt="logo">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Penatibus et magnis dis parturient. Eget dolor morbi non arcu risus. Tristique magna sit amet purus gravida quis blandit.
                    Auctor urna nunc id cursus metus aliquam eleifend mi in. Tellus orci ac auctor augue mauris augue neque gravida. Nullam vehicula ipsum a arcu.
                    Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Cursus in hac habitasse platea dictumst. Egestas dui id ornare arcu.
                    Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim.
                </p>
                <p>
                    Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Neque volutpat ac tincidunt vitae semper quis lectus.
                    Sed sed risus pretium quam vulputate dignissim suspendisse in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar.
                    Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Amet cursus sit amet dictum sit amet justo donec enim.
                    Vestibulum rhoncus est pellentesque elit ullamcorper. Id aliquet risus feugiat in ante metus dictum at.
                </p>
            </template>            
        </DxPopup>
    </div>
</template>

<script>
// ...

export default {
    // ...
}
</script>

React

App.js

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 logo from "./assets/images/dx-logo.png";

const renderContent = () =>  {
    return (
        <>
            <img src={logo} alt="logo" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Penatibus et magnis dis parturient. Eget
                dolor morbi non arcu risus. Tristique magna sit amet
                purus gravida quis blandit. Auctor urna nunc id cursus
                metus aliquam eleifend mi in. Tellus orci ac auctor
                augue mauris augue neque gravida. Nullam vehicula ipsum
                a arcu. Nullam ac tortor vitae purus faucibus ornare
                suspendisse sed nisi. Cursus in hac habitasse platea
                dictumst. Egestas dui id ornare arcu. Dictumst
                vestibulum rhoncus est pellentesque elit ullamcorper
                dignissim.
            </p>
            <p>
                Mauris rhoncus aenean vel elit scelerisque mauris
                pellentesque pulvinar. Neque volutpat ac tincidunt vitae
                semper quis lectus. Sed sed risus pretium quam vulputate
                dignissim suspendisse in. Urna nec tincidunt praesent
                semper feugiat nibh sed pulvinar. Ultricies lacus sed
                turpis tincidunt id aliquet risus feugiat. Amet cursus
                sit amet dictum sit amet justo donec enim. Vestibulum
                rhoncus est pellentesque elit ullamcorper. Id aliquet
                risus feugiat in ante metus dictum at.
            </p>
        </>            
    )
}

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

export default App;

Show and Hide the Popup

jQuery

To show the Popup, call its show() method. In the code below, this method is called when users click the Open Popup button. You can also enable the visible property to show the Popup immediately after creation.

Call the Popup's hide() method to hide the Popup. Users can also hide the Popup when they click outside its boundaries. To enable this functionality, set the closeOnOutsideClick property to true.

index.js

$(function () {
    $("#popup").dxPopup({
        // ...
        visible: true,
        closeOnOutsideClick: true
    });

    const popup = $("#popup").dxPopup("instance");

    $("#button").dxButton({
        text: "Open popup",
        onClick: () => {
            popup.show();
        }
    });
});

Angular

Enable the visible property to show the Popup. In the code below, the value of this property is two-way bound to a variable. The togglePopup() method toggles the value between true and false when users click the Open Popup button.

Users can hide the Popup when they click outside its boundaries. To enable this functionality, set the closeOnOutsideClick property to true.

app.component.html

app.component.ts

<dx-popup
    [(visible)]="isPopupVisible"
    [closeOnOutsideClick]="true">
    <!-- ... -->
</dx-popup>
<dx-button
    text="Open popup"
    (onClick)="togglePopup()">
</dx-button>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    isPopupVisible: boolean;

    constructor() {
        this.isPopupVisible = true;
    }

    togglePopup(): void {
        this.isPopupVisible = !this.isPopupVisible;
    }
}

Vue

Users can hide the Popup when they click outside its boundaries. To enable this functionality, set the closeOnOutsideClick property to true.

App.vue

<template>
    <div id="app-container">
        <DxPopup
            v-model:visible="isPopupVisible"
            :close-on-outside-click="true">
            <!-- ... -->
        </DxPopup>
        <DxButton
            text="Open popup"
            @click="togglePopup"
        />
    </div>
</template>

<script>
// ...
import { DxButton } from 'devextreme-vue/button';

export default {
    components: {
        // ...
        DxButton,
    },
}
</script>

React

Enable the visible property to show the Popup. In the code below, the value of this property is bound to a state variable with the React useState hook. The togglePopup function toggles the value between true and false when users click the Open Popup button.

Call the togglePopup function when the onHiding event fires to hide the Popup. Users can also hide the Popup when they click outside its boundaries. To enable this functionality, set the closeOnOutsideClick property to true.

App.js

import React, { useState } from 'react';

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

const App = () =>  {
    const [isPopupVisible, setPopupVisibility] = useState(true);

    const togglePopup = () => {
        setPopupVisibility(!isPopupVisible);
    };
    return (
        <div className="App">
            <Popup
                visible={isPopupVisible}
                closeOnOutsideClick={true}
                onHiding={togglePopup}
            />
            <Button 
                text="Open popup"
                onClick={togglePopup}
            />
        </div>
    );
}

export default App;

Define the Title

Set the showTitle property to true to display the Popup's title bar and use the title property to define its text:

jQuery

index.js

$(function () {
    $("#popup").dxPopup({
        // ...
        showTitle: true,
        title: "Information",
    });
    // ...
});

Angular

app.component.html

<dx-popup
    [showTitle]="true"
    title="Information">
    <!-- ... -->
</dx-popup>
<!-- ... -->

Vue

App.vue

<template>
    <div id="app-container">
        <DxPopup
            :show-title="true"
            title="Information">
            <!-- ... -->
        </DxPopup>
        <!-- ... -->
    </div>
</template>

<script>
// ...
</script>

React

App.js

// ...
const App = () =>  {
    // ...
    return (
        <div className="App">
            <Popup
                showTitle={true}
                title="Information"
            />
            {/* ... */}
        </div>
    );
}

export default App;

Resize the Popup

Use the height and width properties to set the Popup's size. Set the resizeEnabled property to true to allow users to resize the Popup.

jQuery

index.js

$(function () {
    $("#popup").dxPopup({
        // ...
        width: 500,
        height: 500,
        resizeEnabled: true
    });
    // ...
});

Angular

app.component.html

<dx-popup
    [height]="500"
    [width]="500"
    [resizeEnabled]="true">
    <!-- ... -->
</dx-popup>
<!-- ... -->

Vue

App.vue

<template>
    <div id="app-container">
        <DxPopup
            :height="500"
            :width="500"
            :resize-enabled="true">
            <!-- ... -->            
        </DxPopup>
        <!-- ... -->
    </div>
</template>

<script>
// ...
</script>

React

App.js

// ...
const App = () =>  {
    // ...
    return (
        <div className="App">
            <Popup
                width={500}
                height={500} 
                resizeEnabled={true}
            />
            {/* ... */}
        </div>
    );
}

export default App;

Add Scrolling

Users can scroll the Popup's content. To enable this functionality, wrap the content into the ScrollView component and set its height and width to 100% of the 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">
            <Popup
                contentRender={renderContent}
            />
        </div>
    );
}

export default App;

Position the Popup

Use the position property to position the Popup within the viewport. Users can also drag and drop the Popup to change its position. To enable this functionalty, set the dragEnabled property to true. Users drag the Popup by its title bar, so make sure that you have configured it.

jQuery

index.js

$(function () {
    $("#popup").dxPopup({
        // ...
        dragEnabled: true,
        position: "center"
    });
    // ...
});

Angular

app.component.html

<dx-popup...
    [dragEnabled]="true"
    position="center">
    <!-- ... -->
</dx-popup>
<!-- ... -->

Vue

App.vue

<template>
    <div id="app-container">
        <DxPopup...
            :drag-enabled="true"
            position="center">
            <!-- ... -->
        </DxPopup>
        <!-- ... -->
    </div>
</template>

<script>
    // ...
</script>

React

App.js

// ...
const App = () => {
    // ...
    return (
        <div className="App">
            <Popup
                dragEnabled={true}
                position="center"
            />
            {/* ... */}
        </div>
    );
}

export default App;

Was this topic helpful?

Thank you!

Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!