diff --git a/src/admin/Bootstrap.Admin/Extensions/JSRuntimeExtensions.cs b/src/admin/Bootstrap.Admin/Extensions/JSRuntimeExtensions.cs
index 2db67f40..2b476ecc 100644
--- a/src/admin/Bootstrap.Admin/Extensions/JSRuntimeExtensions.cs
+++ b/src/admin/Bootstrap.Admin/Extensions/JSRuntimeExtensions.cs
@@ -46,5 +46,11 @@ namespace Bootstrap.Admin.Extensions
         /// </summary>
         /// <param name="jSRuntime"></param>
         public static void EnableAnimation(this IJSRuntime? jSRuntime) => jSRuntime.InvokeVoidAsync("$.enableAnimation");
+
+        /// <summary>
+        /// 修复 Modal 组件
+        /// </summary>
+        /// <param name="jSRuntime"></param>
+        public static void InitModal(this IJSRuntime? jSRuntime) => jSRuntime.InvokeVoidAsync("$.initModal");
     }
 }
diff --git a/src/admin/Bootstrap.Admin/Pages/Admin/Dicts.razor b/src/admin/Bootstrap.Admin/Pages/Admin/Dicts.razor
index 3ccc49a8..67b70c64 100644
--- a/src/admin/Bootstrap.Admin/Pages/Admin/Dicts.razor
+++ b/src/admin/Bootstrap.Admin/Pages/Admin/Dicts.razor
@@ -57,6 +57,8 @@
     </div>
 </div>
 
+<Modal></Modal>
+
 @code {
 
 }
diff --git a/src/admin/Bootstrap.Admin/Shared/Modal.razor b/src/admin/Bootstrap.Admin/Shared/Modal.razor
new file mode 100644
index 00000000..8b4f0f1f
--- /dev/null
+++ b/src/admin/Bootstrap.Admin/Shared/Modal.razor
@@ -0,0 +1,36 @@
+@inject IJSRuntime JSRuntime
+
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
+    Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                ...
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary">Save changes</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (firstRender)
+        {
+            JSRuntime.InitModal();
+        }
+    }
+}
diff --git a/src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js b/src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js
index dcaa0479..082e9a2c 100644
--- a/src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js
+++ b/src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js
@@ -115,6 +115,9 @@
         enableBackground: function (val) {
             if (val) $('.main-content').addClass('welcome-bg').find('nav').addClass('d-none').removeClass('d-flex');
             else $('.main-content').removeClass('welcome-bg').find('nav').addClass('d-flex').removeClass('d-none');
+        },
+        initModal: function () {
+            $('.modal').appendTo($('body'));
         }
     });