Popup

• Jul 02, 2026
• 2 minutes to read

Popup is a UI component that displays content in a window that overlays the current view.

Run Demo: Popup Read Tutorial

Getting Started

The Popup UI Control is based on the DevExtreme Popup component.

The following help topics explain how to add this control to your project:

• Add DevExtreme to a Visual Studio Project or Configure a non Visual Studio Project
• Add Controls to a Project
• Razor Syntax

Basic Syntax

PopupBasics.cshtml

@(Html.DevExtreme().Popup()
    .Visible(true)
    .Title("Popup Dialog")
    .Content(@<text><div>This is a Popup</div></text>)
)

PopupController.cs

using Microsoft.AspNetCore.Mvc;

namespace ASP_NET_Core.Controllers {
    public class PopupController : Controller {
        public IActionResult GettingStarted() {
            return View();
        }
    }
}

Built-in Capabilities and Configuration Guides

• Rich Customization
  You can define Popup content, header, and footer.

• Position and Alignment
  Position and align Popup relative to the viewport or a specific element.

• Animation
  Configure opening and closing animations. The settings include duration, delay, type, and so on.

• Hide Popup
  Choose how users can close the Popup: show the close button, hide on the outside click, or define your custom close button.

• Drag and Resize
  A user can resize and drag the Popup by the title.

API

Server-Side API

Initialization

Call the Popup() method to create a Popup control. This action initializes a PopupBuilder instance. Use the instance methods to specify Popup options and event handlers.

Options

For a complete option list, see PopupBuilder Members. For details on how to specify control options, refer to the following help topic: Specify Options.

Events

For available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.

Client-Side API

Options

If you need to specify the Popup options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme Popup options.

Methods

For a list of available methods, see DevExtreme Popup methods. For details on how to call methods, refer to the following help topic: Call Methods.

Accessibility

For more information on Popup accessibility compliance, refer to the following help topic: Accessibility.

Demos

Run Demo: Popup