DxPopupBase.CloseOnOutsideClick Property

Specifies whether the Popup should be closed when a user clicks outside the Popup’s boundaries.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(true)]
[Parameter]
public bool CloseOnOutsideClick { get; set; }

Property Value

Type	Default	Description
Boolean	true	true if the Popup should be closed in response to an outer click; otherwise; false

Remarks

Users can close the Popup in the following ways:

• Click the Close button in the header.
• Click outside the Popup’s boundaries.
• Press Escape.

Set the CloseOnOutsideClick property to false to not close the Popup in response to an outer click. The ShowCloseButton and CloseOnEscape properties allow you to disable other user capabilities.

<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."
         CloseOnOutsideClick="false" />

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

You can also use the templates listed below to implement a custom close action. In the template, use the context parameter’s CloseCallback property.

• HeaderContentTemplate / BodyContentTemplate / FooterContentTemplate
• HeaderTemplate / BodyTemplate / FooterTemplate