Answer by Daniël Hoffman for Bootstrap modal appearing under background

Update: The original JS method resulted in multiple clones of my modalbeing appended to the body, if the component is initialized multiple times. Instead, first confirm that the modal is notalready appended:

function AttachModalsToBody(modalID) {    var modal = $("body").children('#'+ modalID);    if ($("body").children('#'+ modalID).length == 0) {        $('#'+ modalID).appendTo("body");    }}

In Blazor (where I make use of Bootstrap 5.0) I do the following (adapted from the answer of @AdamAlbright) to prevent the modal from appearing behind the backdrop:

In my project, each modal is inside its own separate component, and as I need to set their parameters from within other components, it's obviously not possible to move the modals outside of these parent components. I therefore use JS Interop to attach each modal to the body, when it renders for the first time.

Example: MyModal.razor

Inside each modal/component:

@inject IJSRuntime jsRuntime<!--HTML Section omitted for brevity-->    @code{        protected override async Task OnAfterRenderAsync(bool firstRender)        {            if (firstRender)                await jsRuntime.InvokeVoidAsync("AttachModalToBody", "#myModalID");        }    }

And inside JS file:

function AttachModalToBody(modalID) {    $(modalID).appendTo("body");}