HyperCube/Pages/ModalInfo.razor

<div class="modal @modalClass" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="@Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @Body
                @if (modalMessage.Length > 0)
                {
                    <p>@modalMessage</p>
                }
            </div>
            <div class="modal-footer">                
                <button type="button" class="upload__btn" data-dismiss="modal" @onclick="@Close">Закрыть</button>
            </div>
        </div>
    </div>
</div>

@if (showBackdrop)
{
    <div class="modal-backdrop fade show"></div>
}

@code {
    [Parameter]
    public RenderFragment Title { get; set; }

    [Parameter]
    public RenderFragment Body { get; set; }

    private string modalDisplay = "none;";
    private string modalClass = "";
    private string modalMessage = "";
    private bool showBackdrop = false;

    public void Open(string message = "")
    {
        modalDisplay = "block;";
        modalClass = "show";
        showBackdrop = true;
        modalMessage = message;
    }

    public void Close()
    {
        modalDisplay = "none";
        modalClass = "";
        showBackdrop = false;
    }
}