DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Popup - Overview

This example demonstrates how to show and hide the Popup component, populate it with content, specify its position and other settings.

To see step-by-step instructions on how to get started with the DevExtreme Popup component, refer to the following tutorial: Getting Started with Popup.

DevExtreme Accessibility Compliance
DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo’s accessibility level, click the Run AXE® Validation button to launch the AXE® web accessibility evaluation tool.
All trademarks or registered trademarks are property of their respective owners. AXE® Terms of Use
The overall accessibility level of your application depends on the Popup features used.
To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

Show and Hide the Popup

Bind the visible property to a Boolean variable (popupVisible in this demo). Next, implement the showInfo(employee) method to set this Boolean variable to true. This causes the Popup to appear. To close a Popup, choose one of the following options:

  • Built-in close button
    Enable the showCloseButton property to display the Close button in a Popup's top toolbar.

  • Custom close button
    This demo shows how to add custom buttons to a Popup. One of these buttons uses an onClick handler to set the popupVisible variable to false, causing the Popup to disappear. Refer to the next section (Configure the Popup) to learn how you can populate a popup with custom controls.

  • On outside click
    Enable the hideOnOutsideClick property to allow users to hide the Popup by clicking outside the component.

Configure the Popup

The Popup inner area is divided into three parts:

  • Top toolbar

    • Predefined
      Set showTitle to true and use the title property to specify the caption. The Close button will appear if you do not disable the showCloseButton property.

    • Custom
      Add toolbarItems markup and set each item's toolbar property to top. If you want to display an item in the overflow menu, as shown in this demo, set the item's locateInMenu property to always. You can also assign never to this property to keep the item outside the overflow menu, or you can assign auto to hide the item in the menu if the Popup's width decreases.

  • Content
    To populate the Popup with content, add markup inside the component.

  • Bottom toolbar
    To enable the bottom toolbar, declare toolbarItems in the markup as shown in this demo. Set each item's toolbar property to bottom. To learn more about toolbar configuration, refer to the following tutorial: Getting Started with Toolbar

Resize and Position

To specify Popup size, use the height and width properties.

In this demo, each Popup's location is relative to the image. The code specifies the my, at, and of properties of the position object. The configuration in the demo reads as follows: "place my center side at the bottom side of the #image${employee.ID} element."

Use the container property to select the container in which you want to render the Popup. If you set the container property to an element on the page, the shading applies to this element.

Turn on the dragEnabled option to allow users to move a Popup around the page.