Vue Popup - Getting Started
jQuery
Angular
Vue
React
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 GitHub repository.
Create a Popup
jQuery
Add DevExtreme to your jQuery application and use the following code to create a Popup:
$(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/23.1.12/css/dx.light.css"> <link rel="stylesheet" href="index.css"> <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/23.1.12/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:
<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:
<template> <div id="app-container"> <DxPopup id="popup"> <!-- Configuration goes here --> </DxPopup> </div> </template> <script> 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:
import React from 'react'; 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 content in the Popup's markup or use the contentTemplate. We recommend that you use the second approach since it can reduce page startup time. Refer to the following help topic for more information: deferRendering.
jQuery
$(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
<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
<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
import React from 'react'; 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 hideOnOutsideClick property to true.
$(function () { $("#popup").dxPopup({ // ... visible: true, hideOnOutsideClick: 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 hideOnOutsideClick property to true.
<dx-popup [(visible)]="isPopupVisible" [hideOnOutsideClick]="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
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 hideOnOutsideClick property to true.
<template> <div id="app-container"> <DxPopup v-model:visible="isPopupVisible" :hide-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 hideOnOutsideClick property to true.
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} hideOnOutsideClick={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
$(function () { $("#popup").dxPopup({ // ... showTitle: true, title: "Information", }); // ... });
Angular
<dx-popup [showTitle]="true" title="Information"> <!-- ... --> </dx-popup> <!-- ... -->
Vue
<template> <div id="app-container"> <DxPopup :show-title="true" title="Information"> <!-- ... --> </DxPopup> <!-- ... --> </div> </template> <script> // ... </script>
React
// ... const App = () => { // ... return ( <div className="App"> <Popup showTitle={true} title="Information" /> {/* ... */} </div> ); } export default App;
Resize the Popup
jQuery
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.
$(function () { $("#popup").dxPopup({ // ... width: 500, height: 500, resizeEnabled: true }); // ... });
Angular
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.
<dx-popup [height]="500" [width]="500" [resizeEnabled]="true"> <!-- ... --> </dx-popup> <!-- ... -->
Vue
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.
<template> <div id="app-container"> <DxPopup :height="500" :width="500" :resize-enabled="true"> <!-- ... --> </DxPopup> <!-- ... --> </div> </template> <script> // ... </script>
React
Set the resizeEnabled property to true
to allow users to resize the Popup. If you want to specify the initial Popup size, use the height and width properties in uncontrolled mode:
// ... const App = () => { // ... return ( <div className="App"> <Popup defaultWidth={500} defaultHeight={500} resizeEnabled={true} /> {/* ... */} </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
$(function () { $("#popup").dxPopup({ // ... dragEnabled: true, position: "center" }); // ... });
Angular
<dx-popup... [dragEnabled]="true" position="center"> <!-- ... --> </dx-popup> <!-- ... -->
Vue
<template> <div id="app-container"> <DxPopup... :drag-enabled="true" position="center"> <!-- ... --> </DxPopup> <!-- ... --> </div> </template> <script> // ... </script>
React
// ... const App = () => { // ... return ( <div className="App"> <Popup dragEnabled={true} position="center" /> {/* ... */} </div> ); } export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.