CloudMusic/FNZCM/FNZCM.BlazorWasm/UI/Components/Modal.razor

@inject IJSRuntime js
@code {
    [Parameter] public RenderFragment Title { get; set; }
    [Parameter] public RenderFragment Body { get; set; }
    [Parameter] public RenderFragment Footer { get; set; }
    [Parameter] public bool ShowCloseButton { get; set; } = true;
    [Parameter] public bool StaticBackDrop { get; set; }
}

<div class="modal fade" id="@ElementId" data-bs-backdrop="@(StaticBackDrop?"static":"true")">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@Title</h5>
                @if (ShowCloseButton)
                {
                    <button type="button" class="btn-close" @onclick="Hide"></button>
                }
            </div>
            <div class="modal-body">
                @Body
            </div>
            <div class="modal-footer">
                @if (Footer == null)
                {
                    if (ShowCloseButton)
                    {
                        <button class="btn btn-primary" @onclick="Hide">Close</button>
                    }
                }
                else
                {
                    @Footer
                }
            </div>
        </div>
    </div>
</div>

@code {
    private const string HTML_ID_PREFIX = "select2-input-";
    private readonly string inputGuid = Guid.NewGuid().ToString();
    private string ElementId => HTML_ID_PREFIX + inputGuid;

    private ValueTask ShowInternal() => js.InvokeVoidAsync("BootstrapModal", ElementId, true);
    private ValueTask HideInternal() => js.InvokeVoidAsync("BootstrapModal", ElementId, false);
    private ValueTask ToggleInternal() => js.InvokeVoidAsync("BootstrapModal", ElementId);
    private ValueTask UpdateBackDropInternal() => js.InvokeVoidAsync("BootstrapModalSetBackDrop", ElementId, StaticBackDrop);

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        UpdateBackDropInternal();
    }

    private void CloseButton_Click() => HideInternal();
    public void Show() => ShowInternal();
    public void Hide() => HideInternal();
    public void Toggle() => ToggleInternal();

}