diff --git a/src/BootstrapBlazor.Server/Components/Components/MaskDemo.razor b/src/BootstrapBlazor.Server/Components/Components/MaskDemo.razor
new file mode 100644
index 00000000000..26d61c3bc63
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Components/MaskDemo.razor
@@ -0,0 +1,8 @@
+<div class="mask-dialog-demo row">
+    <div class="col-12">
+        <h3>MaskDemo</h3>
+    </div>
+    <div class="col-12">
+        <DialogCloseButton></DialogCloseButton>
+    </div>
+</div>
diff --git a/src/BootstrapBlazor.Server/Components/Components/MaskDemo.razor.css b/src/BootstrapBlazor.Server/Components/Components/MaskDemo.razor.css
new file mode 100644
index 00000000000..e27e761f8d0
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Components/MaskDemo.razor.css
@@ -0,0 +1,5 @@
+.mask-dialog-demo {
+    background-color: var(--bs-body-bg);
+    border-radius: var(--bs-border-radius);
+    padding: 1rem;
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Masks.razor b/src/BootstrapBlazor.Server/Components/Samples/Masks.razor
index d535a720d0f..627504bd0fd 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Masks.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Masks.razor
@@ -27,3 +27,7 @@
     <Mask @ref="CustomMask1"></Mask>
     <Mask @ref="CustomMask2"></Mask>
 </DemoBlock>
+
+<DemoBlock Title="@Localizer["MaskCloseTitle"]" Introduction="@Localizer["MaskCloseIntro"]">
+    <Button Text="Show" OnClick="ShowCloseMask"></Button>
+</DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Masks.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Masks.razor.cs
index 76abdd4d6e2..819f1a90d97 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Masks.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/Masks.razor.cs
@@ -56,4 +56,12 @@ await MaskService.Show(new MaskOption()
         await MaskService.Close(CustomMask1);
         await MaskService.Close(CustomMask2);
     }
+
+    private async Task ShowCloseMask()
+    {
+        await MaskService.Show(new MaskOption()
+        {
+            ChildContent = BootstrapDynamicComponent.CreateComponent<MaskDemo>().Render()
+        });
+    }
 }
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index ff02ed9722e..bad1a1235da 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -453,7 +453,9 @@
     "MaskContainerIntro": "Specify the mask position by setting the <code>MaskOption</code> parameter <code>ContainerId</code>",
     "MultipleMaskContainerTitle": "Multiple Mask",
     "MultipleMaskContainerIntro": "By customizing the <code>Mask</code> component, you can mask multiple parts of a web page.",
-    "MultipleMaskContainerDesc": "Set the <code>Mask</code> component in the component. When calling the <code>Show</code> instance method of <code>MaskService</code>, specify the <code>Mask</code> instance as the second parameter."
+    "MultipleMaskContainerDesc": "Set the <code>Mask</code> component in the component. When calling the <code>Show</code> instance method of <code>MaskService</code>, specify the <code>Mask</code> instance as the second parameter.",
+    "MaskCloseTitle": "Close By Code",
+    "MaskCloseIntro": "Close the popup by using the <code>DialogCloseButton</code> component or cascade parameters"
   },
   "BootstrapBlazor.Server.Components.Samples.Messages": {
     "MessagesTitle": "Message prompt",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index aaabe294bf2..6520118edc3 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -453,7 +453,10 @@
     "MaskContainerIntro": "通过设置 <code>MaskOption</code> 参数 <code>ContainerId</code> 指定遮罩出现位置",
     "MultipleMaskContainerTitle": "多遮罩",
     "MultipleMaskContainerIntro": "通过自定义设置 <code>Mask</code> 组件可实现网页内多个局部进行遮罩操作",
-    "MultipleMaskContainerDesc": "组件内自己设置 <code>Mask</code> 组件，调用 <code>MaskService</code> 实例方法 <code>Show</code> 时，通过第二个参数指定 <code>Mask</code> 实例即可"
+    "MultipleMaskContainerDesc": "组件内自己设置 <code>Mask</code> 组件，调用 <code>MaskService</code> 实例方法 <code>Show</code> 时，通过第二个参数指定 <code>Mask</code> 实例即可",
+    "MaskCloseTitle": "代码关闭弹窗",
+    "MaskCloseIntro": "通过使用 <code>DialogCloseButton</code> 组件或者级联参数关闭弹窗"
+
   },
   "BootstrapBlazor.Server.Components.Samples.Messages": {
     "MessagesTitle": "Message 消息提示",
diff --git a/src/BootstrapBlazor/Components/Mask/Mask.razor b/src/BootstrapBlazor/Components/Mask/Mask.razor
index 11571b9233a..a273b6dda1e 100644
--- a/src/BootstrapBlazor/Components/Mask/Mask.razor
+++ b/src/BootstrapBlazor/Components/Mask/Mask.razor
@@ -9,7 +9,9 @@
         @if (_options is { ChildContent: not null })
         {
             <div class="bb-mask-content">
-                @_options.ChildContent
+                <CascadingValue Value="CloseAsync" IsFixed="true">
+                    @_options.ChildContent
+                </CascadingValue>
             </div>
         }
     </div>
diff --git a/src/BootstrapBlazor/Components/Mask/Mask.razor.cs b/src/BootstrapBlazor/Components/Mask/Mask.razor.cs
index c2d5d0fe0cc..2d41b845588 100644
--- a/src/BootstrapBlazor/Components/Mask/Mask.razor.cs
+++ b/src/BootstrapBlazor/Components/Mask/Mask.razor.cs
@@ -58,4 +58,9 @@ private Task Show(MaskOption? option)
         StateHasChanged();
         return Task.CompletedTask;
     }
+
+    private Task CloseAsync()
+    {
+        return Show(null);
+    }
 }
diff --git a/test/UnitTest/Services/MaskServiceTest.cs b/test/UnitTest/Services/MaskServiceTest.cs
index db39d184e2b..09afc0b8101 100644
--- a/test/UnitTest/Services/MaskServiceTest.cs
+++ b/test/UnitTest/Services/MaskServiceTest.cs
@@ -92,6 +92,10 @@ public async Task Show_Component()
         });
         var button = cut.Find("button");
         await cut.InvokeAsync(() => button.Click());
+
+        var com = cut.FindComponent<MockComponent>();
+        var result = await cut.InvokeAsync(com.Instance.Test);
+        Assert.True(result);
     }
 
     [Fact]
@@ -114,6 +118,17 @@ public async Task Show_Type()
 
     class MockComponent : ComponentBase
     {
+        [CascadingParameter]
+        private Func<Task>? OnCloseAsync { get; set; }
+
+        public async Task<bool> Test()
+        {
+            if (OnCloseAsync != null)
+            {
+                await OnCloseAsync();
+            }
 
+            return OnCloseAsync != null;
+        }
     }
 }