canvasManagement/Management.Web/Shared/Components/Modal.razor

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

  [Parameter, EditorRequired]
  public RenderFragment? Body { get; set; }

  [Parameter, EditorRequired]
  public RenderFragment? Footer { get; set; }

  [Parameter]
  public Action OnShow { get; set; } = () => { };

  [Parameter]
  public Action OnHide { get; set; } = () => { };

  private string modalClass = "hide-modal";
  private bool showBackdrop = false;
  public void Show()
  {
    
    modalClass = "show-modal";
    showBackdrop = true;
    OnShow();
  }

  public void Hide()
  {
    modalClass = "hide-modal";
    showBackdrop = false;
    OnHide();
  }
}

<div class="modal @modalClass" @onmousedown="Hide">
  <div class="modal-dialog modal-xl" role="document" @onmousedown:stopPropagation="true">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title text-center w-100">@Title</h4>
        <button type="button" class="btn-close" @onclick="Hide"></button>
      </div>
      <div class="modal-body">@Body</div>
      <div class="modal-footer">@Footer</div>
    </div>
  </div>
</div>

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