have many of the primary interactions working

Management.Web/Shared/Components/Modal.razor

@@ -0,0 +1,52 @@
+@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-lg" 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>
+} 

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

@@ -0,0 +1,16 @@
+
+.show-modal {
+  animation: enter 250ms;
+  display: block;
+  opacity: 1;
+}
+
+@keyframes enter {
+  from {
+    display: block;
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}