fix(Modal): support backdrop on multiple dialog mode (dotnetcore#6807)

* fix(Modal): support backdrop on multiple dialog mode

* chore: bump version 9.11.0

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.11.0-beta01</Version>
+    <Version>9.11.0</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Dialog/Dialog.razor

@@ -5,6 +5,11 @@
        OnShownAsync="@_onShownAsync" OnCloseAsync="@_onCloseAsync" class="@ClassString">
     @for (var index = 0; index < DialogParameters.Keys.Count; index++)
     {
+        if (index != 0 && index == DialogParameters.Keys.Count - 1)
+        {
+            <div class="modal-backdrop fade show"></div>
+        }
+
         @RenderDialog(index, DialogParameters.Keys.ElementAt(index))
     }
 </Modal>

src/BootstrapBlazor/Components/Modal/Modal.razor.scss

@@ -82,24 +82,27 @@
     width: 100vw !important;
 }
 
+.modal-multiple {
+    --bb-backdrop-zindex: 1050;
+}
+
 .modal-multiple .modal-dialog {
     position: fixed;
     inset: 0;
-
-    &:last-child:before {
-        content: "";
-        position: fixed;
-        inset: 0;
-        background-color: #000;
-        opacity: 0.3;
-        pointer-events: auto;
-    }
 }
 
 .modal-multiple ~ .modal-backdrop {
     display: none;
 }
 
+.modal-multiple .modal-backdrop {
+    z-index: var(--bb-backdrop-zindex);
+}
+
+.modal-multiple .modal-backdrop + .modal-dialog {
+    z-index: var(--bb-backdrop-zindex);
+}
+
 @media print {
     .bb-printview-open {
         overflow: auto !important;