Custom Overlay
The overlay can be customised by providing one or more custom CSS classes to augment or overwrite the default style. Note that you may need to add the !important
keyword to some properties due the the use of scoped CSS, which can create a higher specificity for the default styles.
The following example shows how to define a CSS class that overrides the default overlay background colour.
my-app.css
.custom-modal-overlay {
background-color: rgba(255, 0, 0, 0.5) !important;
}
This can then be applied to your modal with either of the following options.
Configuring for all modals
<CascadingBlazoredModal OverlayCustomClass="custom-modal-overlay" />
Configuring for a single modal
var options = new ModalOptions()
{
OverlayCustomClass = "custom-modal-overlay"
};
Modal.Show<Confirm>("Are you sure?", options);