diff --git a/app/src/asset/index.ts b/app/src/asset/index.ts
index 546ec64ff..fd690edf8 100644
--- a/app/src/asset/index.ts
+++ b/app/src/asset/index.ts
@@ -315,9 +315,8 @@ export class Asset extends Model {
           <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
         </div>
       </div>
-      <div id="overlayContainer" class="fn__hidden">
-        <div id="passwordDialog" class="container fn__hidden">
-          <div class="dialog">
+      <div id="dialogContainer">
+        <dialog id="passwordDialog">
             <div class="row">
               <p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
             </div>
@@ -328,10 +327,8 @@ export class Asset extends Model {
               <button id="passwordCancel" class="overlayButton"><span data-l10n-id="password_cancel">Cancel</span></button>
               <button id="passwordSubmit" class="overlayButton"><span data-l10n-id="password_ok">OK</span></button>
             </div>
-          </div>
-        </div>
-        <div id="documentPropertiesDialog" class="container fn__hidden">
-          <div class="dialog b3-menu">
+        </dialog>
+        <dialog id="documentPropertiesDialog">
             <div class="row">
               <span>${window.siyuan.languages.fileName}</span> <p id="fileNameField">-</p>
             </div>
@@ -380,10 +377,8 @@ export class Asset extends Model {
             <div class="buttonRow">
               <button id="documentPropertiesClose" class="b3-button"><span>${window.siyuan.languages.close}</span></button>
             </div>
-          </div>
-        </div>
-        <div id="printServiceOverlay" class="container fn__hidden">
-          <div class="dialog">
+        </dialog>
+        <dialog id="printServiceOverlay">
             <div class="row">
               <span data-l10n-id="print_progress_message">Preparing document for printing…</span>
             </div>
@@ -394,8 +389,7 @@ export class Asset extends Model {
             <div class="buttonRow">
               <button id="printCancel" class="overlayButton"><span data-l10n-id="print_progress_close">Cancel</span></button>
             </div>
-          </div>
-        </div>
+        </dialog>
       </div>
       <div class="pdf__util b3-menu fn__none pdf__util--hide">
         <div class="fn__flex" style="padding: 0 4px">
diff --git a/app/src/assets/scss/pdf/_pdf.scss b/app/src/assets/scss/pdf/_pdf.scss
index c71207290..999e3268f 100644
--- a/app/src/assets/scss/pdf/_pdf.scss
+++ b/app/src/assets/scss/pdf/_pdf.scss
@@ -602,66 +602,50 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   border: 0 none !important;
 }
 
-#overlayContainer {
-  display: table;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.2);
-  z-index: 40000;
+#dialogContainer > dialog {
+  padding: 8px;
+  box-shadow: var(--b3-dialog-shadow);
+  background-color: var(--b3-menu-background);
+  border-radius: 4px;
+  width: 520px;
+  border: 0;
+
+  & > .row {
+    display: table-row;
+
+    & > span {
+      white-space: nowrap;
+    }
+  }
+
+  & > .row > * {
+    display: table-cell;
+  }
+
+  .toolbarField {
+    margin: 5px 0;
+  }
+
+  .separator {
+    display: block;
+    margin: 4px 0;
+    height: 1px;
+    width: 100%;
+    background-color: var(--b3-theme-surface-lighter);
+  }
+
+  .buttonRow {
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  :link {
+    color: rgba(255, 255, 255, 1);
+  }
 }
 
-#overlayContainer > * {
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
 
-#overlayContainer > .container {
-  position: absolute;
-  top: 10%;
-  left: 10%;
-  height: 80%;
-  width: 80%;
-}
-
-#overlayContainer > .container > .dialog {
-  padding: 16px;
-  position: inherit;
-  overflow: auto;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.dialog > .row {
-  display: table-row;
-}
-
-.dialog > .row > * {
-  display: table-cell;
-}
-
-.dialog .toolbarField {
-  margin: 5px 0;
-}
-
-.dialog .separator {
-  display: block;
-  margin: 4px 0;
-  height: 1px;
-  width: 100%;
-  background-color: var(--b3-theme-surface-lighter);
-}
-
-.dialog .buttonRow {
-  text-align: center;
-  vertical-align: middle;
-}
-
-.dialog :link {
-  color: rgba(255, 255, 255, 1);
-}
-
-#passwordOverlay > .dialog {
+#passwordOverlay > dialog {
   text-align: center;
 }
 
@@ -669,7 +653,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   width: 200px;
 }
 
-#documentPropertiesOverlay > .dialog {
+#documentPropertiesOverlay > dialog {
   text-align: left;
 }