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

@using Management.Web.Shared.Components

@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">
  <div class="modal-dialog modal-xl" role="document">
    <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>
}