Overview

CLICK TO SHOW A POP-UP WINDOW

Our Blazor Popup component allows you to display a modal window that overlays the current view. Use the HeaderText and BodyText properties to specify text displayed in the header and body.

To show or close the Popup in code, implement two-way binding for the Visible property. Users can choose from the following options to close the Popup: click the Close button in the header, click outside the Popup's boundaries, or press Escape.

Customization

CLICK TO SHOW A POP-UP WINDOW

Enable the ShowFooter option to display the Popup footer. You can apply custom CSS classes to Popup elements (BodyCssClass, HeaderCssClass, and FooterCssClass properties).

If you specify the HeaderText, BodyText, and FooterText properties, the Popup component uses predefined appearance settings. To customize the window's content and appearance, you can use the following templates:

Alignment and Size

CLICK TO SHOW A POP-UP WINDOW

The HorizontalAlignment and VerticalAlignment properties allow you to position the Popup on the screen. Specify the Width and Height properties to change the Popup's size.

Use the drop-down lists at the top of the demo card to change the Popup's position and width.

Response to Show and Close Actions

CLICK TO SHOW A POP-UP WINDOW

You can handle the following events to process show and close actions:

  • Showing / Closing — Occur before the Popup is displayed/closed and allow you to cancel these actions.
  • Shown / Closed — Occur after the Popup is displayed/closed.

In this demo, a second Popup component appears if you do not select the checkbox in the first Popup.

Resizing

CLICK TO SHOW A POP-UP WINDOW

The Width and Height properties set the Popup's initial size.

Enable the AllowResize property to allow users to change Popup size as requirements dictate. A user can drag window edges or its corners. You can handle ResizeStarted and ResizeCompleted events to process resize actions.

You can also use the following properties to restrict changes to component size: MinWidth, MaxWidth, MinHeight, MaxHeight.

Dragging

CLICK TO SHOW A POP-UP WINDOW

PositionX and PositionY properties set the Popup's initial position.

Activate the AllowDrag option to allow users to drag the Window by its header to a new position. If you disable the AllowDragByHeaderOnly option, users can start a drag-and-drop operation in any element – header, body, or footer.

Handle DragStarted and DragCompleted events to process drag-related operations (save and load the current position).