All docs
V21.1
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

JavaScript/jQuery 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

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>

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.

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>`;
  • });

Show and Hide the Popup

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();
  • }
  • });
  • });

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:

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

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.

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

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:

index.js
  • $(function () {
  • $("#popup").dxPopup({
  • contentTemplate: () => {
  • const content = $("<div />");
  • content.dxScrollView({
  • height: "100%",
  • width: "100%"
  • });
  • return content;
  • },
  • // ...
  • });
  • });

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.

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