Popup for Blazor - Appearance Customization, Multiple Windows, Custom Size and Alignment, and more (v21.1)

As you may know, our Blazor Popup component allows you to display a modal window within a Blazor application. A modal popup allows you to direct user action or display relevant content/information. Our most recent release (v21.1) introduces a series of new features/enhancements to our modal Blazor Popup component.

Header, Body, and Footer Customization

The DevExpress Blazor Popup component offers extended customization options for individual UI elements (header, body, and footer).

• ShowHeader | ShowFooter - Specifies element visibility. The default Popup displays header and body content. Use these two properties to display/hide the header and/or footer.
• HeaderText | BodyText | FooterText - Allows you to display plain text within an element and apply all predefined appearance settings.
• HeaderContentTemplate | BodyContentTemplate | FooterContentTemplate - Allows you to display any UI fragment within an element. These templates only affect the popup’s content region (predefined content alignment and paddings will be applied).
• HeaderTemplate | BodyTemplate | FooterTemplate - Allows you to customize the entire Popup element. Predefined appearance settings do not apply.

Documentation | Demo

<div @onclick="@(() => PopupVisible = true)">
  <p>CLICK TO SHOW A POP-UP WINDOW</p>
</div>

<DxPopup @bind-Visible="@PopupVisible"
  HeaderText="Header"
  BodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet
    metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus,
    accumsan orci auctor, imperdiet mauris. Fusce id purus magna."
  ShowFooter="true">
  <FooterContentTemplate>
    <DxButton RenderStyle="ButtonRenderStyle.Primary" Text="OK"
      Click="@context.CloseCallback" />
  </FooterContentTemplate>
</DxPopup>

@code {
  bool PopupVisible { get; set; } = false;
}

Alignment

Our Blazor Popup is now centered both horizontally and vertically on-screen. This helps enhance the user experience on both desktop and mobile devices. You can use the new HorizontalAlignment and VerticalAlignment properties to modify the Popup position as requirements dictate.

Documentation | Demo

<DxPopup ...
  HorizontalAlignment="HorizontalAlignment.Right"
  VerticalAlignment="VerticalAlignment.Bottom" />

Size

Our Blazor Popup's new Width and Height properties allow you to manually specify Popup size in absolute or relative units. You can also force the popup to adapt its width/height adapt to Popup content (set to auto ). Use our new MinHeight, MaxHeight, MinWidth, and MaxWidth properties to explicitly define a Popup's size constraints.

Documentation | Demo

<DxPopup ...
  Width="auto"
  MinWidth="300px"
  MaxWidth="600px" />

Show and Close Actions

Like in previous versions, you can implement two-way binding for the Visible property (to display and close the Popup). The property value is updated when a user closes the Popup.

<div @onclick="@(() => PopupVisible = true)">
  <p>CLICK TO SHOW A POP-UP WINDOW</p>
</div>

<DxPopup @bind-Visible="@PopupVisible">
</DxPopup>

@code {
  bool PopupVisible { get; set; } = false;
}

Use our new ShowAsync and CloseAsync methods to display and close the Popup asynchronously. Additionally, users can now press Escape or click outside the Popup's boundaries to close it (CloseOnEscape and CloseOnOutsideClick options).

Documentation | Demo

Respond to Show and Close Actions

In v21.1, we implemented the following new events for our Blazor Popup:

• Showing - Fires before the Popup is displayed and allows you to cancel this action.
• Shown - Fires after the Popup is displayed.
• Closing - Fires before the Popup is closed and allows you to cancel this action.
• Closed - Fires after the Popup is closed.

Documentation | Demo

Multiple Popups

You can now display multiple Blazor Popups simultaneously. Popup Z-indices are updated automatically based on display order. You can also use the new ZIndex property to specify a Popup's Z-index manually.

Documentation | Demo

Rendering

In v21.1, our Blazor Popup changed its position in the DOM tree - it now renders directly in the document body. Previously, the Popup was rendered in the DOM tree at the position specified in code. Please consider this rendering change when you apply CSS selectors to the Popup.

More information

Free DevExpress Products - Get Your Copy Today