No black background mask for dialog

Radzen.Blazor Components
1

Hi radzen team,
I want to remove the black background mask of the dialog.How can I implement it?
mask

Many thanks!
Wilson

2

This is the dialog modal overlay and cannot be removed. You can change its color though via CSS:

.rz-dialog-mask {
   background-color: transparent !important;
}
3

I don't want all the dialogs in the system to have no dialog modal overlay. I just want to make it happen when I need to. Can I do this by modifying the style below?

await DialogService.OpenAsync("",
null,
new DialogOptions()
{
Style = "to change the color of dialog modal overlay",
}

4

No, you can't set the style of the mask. We don't plan to add support for that as Radzen Dialogs are modal by design.

5

I apologize for bringing this thread back to life, but there is actually an easy way to hide or show the modal background at will.

This can be achieved with the CSS selector :has.
In the styles you can define the following:

.rz-dialog-wrapper:has(.hide-modal-overlay) .rz-dialog-mask {
    background-color: transparent !important;
}

In the definition of your dialog component which should not have a visible modal background, you have to insert an element having the css class "hide-modal-overlay". You can even use a condition to show or hide this element. For example:

@if (shouldHideModalBackground) {
    <div class="hide-modal-overlay" />
}

As of today, most modern browsers with latest versions like: Chrome/Android browser/Chrome for Android 105+, Edge 105+, Safari/Safari iOS 15.4+, and Opera 91+ supports it by default. Only Firefox 103 to 106 doesn't support it by default, you have to enable it. For mobile: (Opera mini, Samsung internet, and Firefox mobile doesn't support it yet).

2 Likes