Add `Block-Busy.md`.

docs/en/UI/Blazor/Block-Busy.md

@@ -0,0 +1,38 @@
+# Blazor UI: Block/Busy Service
+
+UI Block disables (blocks) the page or a part of the page.
+
+## Quick Example
+
+Simply [inject](../../Dependency-Injection.md) `IBlockUiService` to your page or component and call the `Block/UnBlock` method to disables (blocks) the element.
+
+```csharp
+namespace MyProject.Blazor.Pages
+{
+    public partial class Index
+    {
+        private readonly IBlockUiService _blockUiService;
+
+        public Index(IBlockUiService _blockUiService)
+        {
+            _blockUiService = blockUiService;
+        }
+
+        public async Task BlockForm()
+        {
+			/*
+				Parameters of Block method:
+					selectors: A string containing one or more selectors to match
+					busy : Set to true to show a progress indicator on the blocked area.
+			*/
+            await _blockUiService.Block(selectors: "#MySelectors", busy: true);
+        }
+    }
+}
+```
+
+The resulting UI will look like below:
+
+![ui-busy](../../images/ui-busy.png)
+
+Then you can use `_blockUiService.UnBlock()` to re-enable the busy area/page.

docs/en/docs-nav.json

@@ -958,6 +958,10 @@
                 {
                   "text": "Page Progress",
                   "path": "UI/Blazor/Page-Progress.md"
+                },
+                {
+                  "text": "Block/Busy",
+                  "path": "UI/Blazor/Block-Busy.md"
                 }
               ]
             },

framework/src/Volo.Abp.AspNetCore.Components.Web/wwwroot/libs/abp/css/abp.css

@@ -15,7 +15,7 @@
     width: 100%;
     height: 100%;
     z-index: 102;
-    background-color: #fff;
+    background-color: #fff !important;
     opacity: .8;
     transition: opacity .25s;
 }