feat: redesign backdrop function

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -101,8 +101,8 @@
             </div>
         </div>
     </div>
+    <div class="bb-view-pdf-backdrop invisible"></div>
     <div class="bb-view-pdf-info invisible">
-        <div class="bb-view-pdf-backdrop"></div>
         <div class="bb-view-pdf-dialog">
             <div class="bb-view-pdf-dialog-title mb-3">@Localizer["DocumentProperties"]</div>
             <div class="bb-view-pdf-dialog-item">

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js

@@ -566,6 +566,11 @@ const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => {
         if (dialog) {
             dialog.classList.add("show");
         }
+
+        const backdrop = el.querySelector(".bb-view-pdf-backdrop");
+        if (backdrop) {
+            backdrop.classList.add("show");
+        }
     });
 
     const closeButton = el.querySelector(".btn-close-doc");
@@ -574,6 +579,11 @@ const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => {
         if (dialog) {
             dialog.classList.remove("show");
         }
+
+        const backdrop = el.querySelector(".bb-view-pdf-backdrop");
+        if (backdrop) {
+            backdrop.classList.remove("show");
+        }
     });
 }
 

src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_reader.css

@@ -237,6 +237,18 @@
     inset: 0;
 }
 
+.bb-view-pdf-backdrop {
+    position: absolute;
+    inset: 0;
+    background-color: #000;
+    opacity: 0.6;
+    z-index: 1;
+}
+
+    .bb-view-pdf-backdrop:not(.show) {
+        display: none;
+    }
+
 .bb-view-pdf-info {
     position: absolute;
     inset: 0;
@@ -250,14 +262,6 @@
         display: none;
     }
 
-.bb-view-pdf-backdrop {
-    position: absolute;
-    inset: 0;
-    background-color: #000;
-    opacity: 0.6;
-    z-index: 1;
-}
-
 .bb-view-pdf-dialog {
     background-color: #fff;
     padding: 1rem;