diff --git a/web/chromecom.js b/web/chromecom.js
index 823251221..61c2cb636 100644
--- a/web/chromecom.js
+++ b/web/chromecom.js
@@ -147,7 +147,7 @@ function reloadIfRuntimeIsUnavailable() {
 
 let chromeFileAccessOverlayPromise;
 function requestAccessToLocalFile(fileUrl, overlayManager, callback) {
-  let onCloseOverlay = null;
+  const dialog = document.getElementById("chromeFileAccessDialog");
   if (top !== window) {
     // When the extension reloads after receiving new permissions, the pages
     // have to be reloaded to restore the extension runtime. Auto-reload
@@ -157,18 +157,16 @@ function requestAccessToLocalFile(fileUrl, overlayManager, callback) {
     // for detecting unload of the top-level frame. Should this ever change
     // (crbug.com/511670), then the user can just reload the tab.
     window.addEventListener("focus", reloadIfRuntimeIsUnavailable);
-    onCloseOverlay = function () {
+    dialog.addEventListener("close", function () {
       window.removeEventListener("focus", reloadIfRuntimeIsUnavailable);
       reloadIfRuntimeIsUnavailable();
-      overlayManager.close("chromeFileAccessOverlay");
-    };
+    });
   }
   if (!chromeFileAccessOverlayPromise) {
     chromeFileAccessOverlayPromise = overlayManager.register(
-      "chromeFileAccessOverlay",
-      document.getElementById("chromeFileAccessOverlay"),
-      onCloseOverlay,
-      true
+      "chromeFileAccessDialog",
+      dialog,
+      /* canForceClose = */ true
     );
   }
   chromeFileAccessOverlayPromise.then(function () {
@@ -233,7 +231,7 @@ function requestAccessToLocalFile(fileUrl, overlayManager, callback) {
       }
     };
 
-    overlayManager.open("chromeFileAccessOverlay");
+    overlayManager.open("chromeFileAccessDialog");
   });
 }
 
diff --git a/web/overlay_manager.js b/web/overlay_manager.js
index b77f4a61a..d7d8ee2c8 100644
--- a/web/overlay_manager.js
+++ b/web/overlay_manager.js
@@ -18,43 +18,29 @@ class OverlayManager {
 
   #active = null;
 
-  #keyDownBound = null;
-
   get active() {
     return this.#active;
   }
 
   /**
    * @param {string} name - The name of the overlay that is registered.
-   * @param {HTMLDivElement} element - The overlay's DOM element.
-   * @param {function} [callerCloseMethod] - The method that, if present, calls
-   *                   `OverlayManager.close` from the object registering the
-   *                   overlay. Access to this method is necessary in order to
-   *                   run cleanup code when e.g. the overlay is force closed.
-   *                   The default is `null`.
+   * @param {HTMLDialogElement} dialog - The overlay's DOM element.
    * @param {boolean} [canForceClose] - Indicates if opening the overlay closes
    *                  an active overlay. The default is `false`.
    * @returns {Promise} A promise that is resolved when the overlay has been
    *                    registered.
    */
-  async register(
-    name,
-    element,
-    callerCloseMethod = null,
-    canForceClose = false
-  ) {
-    let container;
-    if (!name || !element || !(container = element.parentNode)) {
+  async register(name, dialog, canForceClose = false) {
+    if (!name || !dialog) {
       throw new Error("Not enough parameters.");
     } else if (this.#overlays[name]) {
       throw new Error("The overlay is already registered.");
     }
-    this.#overlays[name] = {
-      element,
-      container,
-      callerCloseMethod,
-      canForceClose,
-    };
+    this.#overlays[name] = { dialog, canForceClose };
+
+    dialog.addEventListener("cancel", evt => {
+      this.#active = null;
+    });
   }
 
   /**
@@ -83,17 +69,13 @@ class OverlayManager {
       if (this.#active === name) {
         throw new Error("The overlay is already active.");
       } else if (this.#overlays[name].canForceClose) {
-        this.#closeThroughCaller();
+        await this.close();
       } else {
         throw new Error("Another overlay is currently active.");
       }
     }
     this.#active = name;
-    this.#overlays[this.#active].element.classList.remove("hidden");
-    this.#overlays[this.#active].container.classList.remove("hidden");
-
-    this.#keyDownBound = this.#keyDown.bind(this);
-    window.addEventListener("keydown", this.#keyDownBound);
+    this.#overlays[this.#active].dialog.showModal();
   }
 
   /**
@@ -101,7 +83,7 @@ class OverlayManager {
    * @returns {Promise} A promise that is resolved when the overlay has been
    *                    closed.
    */
-  async close(name) {
+  async close(name = this.#active) {
     if (!this.#overlays[name]) {
       throw new Error("The overlay does not exist.");
     } else if (!this.#active) {
@@ -109,28 +91,8 @@ class OverlayManager {
     } else if (this.#active !== name) {
       throw new Error("Another overlay is currently active.");
     }
-    this.#overlays[this.#active].container.classList.add("hidden");
-    this.#overlays[this.#active].element.classList.add("hidden");
+    this.#overlays[this.#active].dialog.close();
     this.#active = null;
-
-    window.removeEventListener("keydown", this.#keyDownBound);
-    this.#keyDownBound = null;
-  }
-
-  #keyDown(evt) {
-    if (this.#active && evt.keyCode === /* Esc = */ 27) {
-      this.#closeThroughCaller();
-      evt.preventDefault();
-    }
-  }
-
-  #closeThroughCaller() {
-    if (this.#overlays[this.#active].callerCloseMethod) {
-      this.#overlays[this.#active].callerCloseMethod();
-    }
-    if (this.#active) {
-      this.close(this.#active);
-    }
   }
 }
 
diff --git a/web/password_prompt.js b/web/password_prompt.js
index 6631783c7..1a8728553 100644
--- a/web/password_prompt.js
+++ b/web/password_prompt.js
@@ -17,8 +17,8 @@ import { PasswordResponses } from "pdfjs-lib";
 
 /**
  * @typedef {Object} PasswordPromptOptions
- * @property {string} overlayName - Name of the overlay for the overlay manager.
- * @property {HTMLDivElement} container - Div container for the overlay.
+ * @property {string} dialogName - Name/identifier for the dialog.
+ * @property {HTMLDialogElement} dialog - The overlay's DOM element.
  * @property {HTMLParagraphElement} label - Label containing instructions for
  *                                          entering the password.
  * @property {HTMLInputElement} input - Input field for entering the password.
@@ -29,6 +29,10 @@ import { PasswordResponses } from "pdfjs-lib";
  */
 
 class PasswordPrompt {
+  #updateCallback = null;
+
+  #reason = null;
+
   /**
    * @param {PasswordPromptOptions} options
    * @param {OverlayManager} overlayManager - Manager for the viewer overlays.
@@ -37,8 +41,8 @@ class PasswordPrompt {
    *   an <iframe> or an <object>. The default value is `false`.
    */
   constructor(options, overlayManager, l10n, isViewerEmbedded = false) {
-    this.overlayName = options.overlayName;
-    this.container = options.container;
+    this.dialogName = options.dialogName;
+    this.dialog = options.dialog;
     this.label = options.label;
     this.input = options.input;
     this.submitButton = options.submitButton;
@@ -47,9 +51,6 @@ class PasswordPrompt {
     this.l10n = l10n;
     this._isViewerEmbedded = isViewerEmbedded;
 
-    this.updateCallback = null;
-    this.reason = null;
-
     // Attach the event listeners.
     this.submitButton.addEventListener("click", this.#verify.bind(this));
     this.cancelButton.addEventListener("click", this.#cancel.bind(this));
@@ -60,18 +61,19 @@ class PasswordPrompt {
     });
 
     this.overlayManager.register(
-      this.overlayName,
-      this.container,
-      this.#cancel.bind(this),
-      true
+      this.dialogName,
+      this.dialog,
+      /* canForceClose = */ true
     );
+
+    this.dialog.addEventListener("close", this.#cancel.bind(this));
   }
 
   async open() {
-    await this.overlayManager.open(this.overlayName);
+    await this.overlayManager.open(this.dialogName);
 
     const passwordIncorrect =
-      this.reason === PasswordResponses.INCORRECT_PASSWORD;
+      this.#reason === PasswordResponses.INCORRECT_PASSWORD;
 
     if (!this._isViewerEmbedded || passwordIncorrect) {
       this.input.focus();
@@ -82,26 +84,36 @@ class PasswordPrompt {
   }
 
   async close() {
-    await this.overlayManager.close(this.overlayName);
-    this.input.value = "";
+    if (this.overlayManager.active === this.dialogName) {
+      this.overlayManager.close(this.dialogName);
+    }
   }
 
   #verify() {
     const password = this.input.value;
     if (password?.length > 0) {
-      this.close();
-      this.updateCallback(password);
+      this.#invokeCallback(password);
     }
   }
 
   #cancel() {
+    this.#invokeCallback(new Error("PasswordPrompt cancelled."));
+  }
+
+  #invokeCallback(password) {
+    if (!this.#updateCallback) {
+      return; // Ensure that the callback is only invoked once.
+    }
     this.close();
-    this.updateCallback(new Error("PasswordPrompt cancelled."));
+    this.input.value = "";
+
+    this.#updateCallback(password);
+    this.#updateCallback = null;
   }
 
   setUpdateCallback(updateCallback, reason) {
-    this.updateCallback = updateCallback;
-    this.reason = reason;
+    this.#updateCallback = updateCallback;
+    this.#reason = reason;
   }
 }
 
diff --git a/web/pdf_document_properties.js b/web/pdf_document_properties.js
index 3e7b5227e..1b4f6804e 100644
--- a/web/pdf_document_properties.js
+++ b/web/pdf_document_properties.js
@@ -45,9 +45,9 @@ function getPageName(size, isPortrait, pageNames) {
 
 /**
  * @typedef {Object} PDFDocumentPropertiesOptions
- * @property {string} overlayName - Name/identifier for the overlay.
+ * @property {string} dialogName - Name/identifier for the dialog.
+ * @property {HTMLDialogElement} dialog - The overlay's DOM element.
  * @property {Object} fields - Names and elements of the overlay's fields.
- * @property {HTMLDivElement} container - Div container for the overlay.
  * @property {HTMLButtonElement} closeButton - Button for closing the overlay.
  */
 
@@ -61,14 +61,14 @@ class PDFDocumentProperties {
    * @param {IL10n} l10n - Localization service.
    */
   constructor(
-    { overlayName, fields, container, closeButton },
+    { dialogName, dialog, fields, closeButton },
     overlayManager,
     eventBus,
     l10n
   ) {
-    this.overlayName = overlayName;
+    this.dialogName = dialogName;
+    this.dialog = dialog;
     this.fields = fields;
-    this.container = container;
     this.overlayManager = overlayManager;
     this.l10n = l10n;
 
@@ -76,11 +76,7 @@ class PDFDocumentProperties {
     // Bind the event listener for the Close button.
     closeButton.addEventListener("click", this.close.bind(this));
 
-    this.overlayManager.register(
-      this.overlayName,
-      this.container,
-      this.close.bind(this)
-    );
+    this.overlayManager.register(this.dialogName, this.dialog);
 
     eventBus._on("pagechanging", evt => {
       this._currentPageNumber = evt.pageNumber;
@@ -100,7 +96,7 @@ class PDFDocumentProperties {
    */
   async open() {
     await Promise.all([
-      this.overlayManager.open(this.overlayName),
+      this.overlayManager.open(this.dialogName),
       this._dataAvailableCapability.promise,
     ]);
     const currentPageNumber = this._currentPageNumber;
@@ -179,8 +175,8 @@ class PDFDocumentProperties {
   /**
    * Close the document properties overlay.
    */
-  close() {
-    this.overlayManager.close(this.overlayName);
+  async close() {
+    this.overlayManager.close(this.dialogName);
   }
 
   /**
@@ -228,7 +224,7 @@ class PDFDocumentProperties {
       }
       return;
     }
-    if (this.overlayManager.active !== this.overlayName) {
+    if (this.overlayManager.active !== this.dialogName) {
       // Don't bother updating the dialog if has already been closed,
       // since it will be updated the next time `this.open` is called.
       return;
diff --git a/web/pdf_print_service.js b/web/pdf_print_service.js
index 08490960f..050608ea4 100644
--- a/web/pdf_print_service.js
+++ b/web/pdf_print_service.js
@@ -115,8 +115,7 @@ PDFPrintService.prototype = {
   destroy() {
     if (activeService !== this) {
       // |activeService| cannot be replaced without calling destroy() first,
-      // so if it differs then an external consumer has a stale reference to
-      // us.
+      // so if it differs then an external consumer has a stale reference to us.
       return;
     }
     this.printContainer.textContent = "";
@@ -132,10 +131,9 @@ PDFPrintService.prototype = {
     this.scratchCanvas = null;
     activeService = null;
     ensureOverlay().then(function () {
-      if (overlayManager.active !== "printServiceOverlay") {
-        return; // overlay was already closed
+      if (overlayManager.active === "printServiceDialog") {
+        overlayManager.close("printServiceDialog");
       }
-      overlayManager.close("printServiceOverlay");
     });
   },
 
@@ -231,7 +229,7 @@ window.print = function () {
   }
   ensureOverlay().then(function () {
     if (activeService) {
-      overlayManager.open("printServiceOverlay");
+      overlayManager.open("printServiceDialog");
     }
   });
 
@@ -241,8 +239,8 @@ window.print = function () {
     if (!activeService) {
       console.error("Expected print service to be initialized.");
       ensureOverlay().then(function () {
-        if (overlayManager.active === "printServiceOverlay") {
-          overlayManager.close("printServiceOverlay");
+        if (overlayManager.active === "printServiceDialog") {
+          overlayManager.close("printServiceDialog");
         }
       });
       return; // eslint-disable-line no-unsafe-finally
@@ -283,10 +281,10 @@ function abort() {
 }
 
 function renderProgress(index, total, l10n) {
-  const progressContainer = document.getElementById("printServiceOverlay");
+  const progressDialog = document.getElementById("printServiceDialog");
   const progress = Math.round((100 * index) / total);
-  const progressBar = progressContainer.querySelector("progress");
-  const progressPerc = progressContainer.querySelector(".relative-progress");
+  const progressBar = progressDialog.querySelector("progress");
+  const progressPerc = progressDialog.querySelector(".relative-progress");
   progressBar.value = progress;
   l10n.get("print_progress_percent", { progress }).then(msg => {
     progressPerc.textContent = msg;
@@ -338,14 +336,16 @@ function ensureOverlay() {
     if (!overlayManager) {
       throw new Error("The overlay manager has not yet been initialized.");
     }
+    const dialog = document.getElementById("printServiceDialog");
 
     overlayPromise = overlayManager.register(
-      "printServiceOverlay",
-      document.getElementById("printServiceOverlay"),
-      abort,
-      true
+      "printServiceDialog",
+      dialog,
+      /* canForceClose = */ true
     );
+
     document.getElementById("printCancel").onclick = abort;
+    dialog.addEventListener("close", abort);
   }
   return overlayPromise;
 }
diff --git a/web/viewer-snippet-chrome-overlays.html b/web/viewer-snippet-chrome-overlays.html
index 7f8e03f55..1089963d1 100644
--- a/web/viewer-snippet-chrome-overlays.html
+++ b/web/viewer-snippet-chrome-overlays.html
@@ -1,32 +1,30 @@
-<div id="chromeFileAccessOverlay" class="container hidden">
-  <div class="dialog">
-    <div class="row">
-      <!-- The extension icon (PDF.js logo) will be shown at the left, to help
-           users with recognizing which checkbox they have to click when they
-           visit chrome://extensions.
-      -->
-      <p id="chrome-pdfjs-logo-bg" style="
-          display: block;
-          padding-left: 60px;
-          min-height: 48px;
-          background-size: 48px;
-          background-repeat: no-repeat;
-          font-size: 14px;
-          line-height: 1.8em;
-          word-break: break-all;">
-        Click on
-        "<span id="chrome-file-access-label">Allow access to file URLs</span>"
-        at
-        <a id="chrome-link-to-extensions-page">chrome://extensions</a>
-        <br>
-        to view <span id="chrome-url-of-local-file">this PDF file.</span>
-      </p>
-    </div>
-    <div class="row">
-      <p>
-        or select the file again:
-        <input type="file" id="chrome-file-fallback" accept=".pdf">
-      </p>
-    </div>
+<dialog id="chromeFileAccessDialog">
+  <div class="row">
+    <!-- The extension icon (PDF.js logo) will be shown at the left, to help
+         users with recognizing which checkbox they have to click when they
+         visit chrome://extensions.
+    -->
+    <p id="chrome-pdfjs-logo-bg" style="
+        display: block;
+        padding-left: 60px;
+        min-height: 48px;
+        background-size: 48px;
+        background-repeat: no-repeat;
+        font-size: 14px;
+        line-height: 1.8em;
+        word-break: break-all;">
+      Click on
+      "<span id="chrome-file-access-label">Allow access to file URLs</span>"
+      at
+      <a id="chrome-link-to-extensions-page">chrome://extensions</a>
+      <br>
+      to view <span id="chrome-url-of-local-file">this PDF file.</span>
+    </p>
   </div>
-</div>
+  <div class="row">
+    <p>
+      or select the file again:
+      <input type="file" id="chrome-file-fallback" accept=".pdf">
+    </p>
+  </div>
+</dialog>
diff --git a/web/viewer.css b/web/viewer.css
index 097aef97a..2e4bebc78 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -62,9 +62,9 @@
   --doorhanger-hover-color: rgba(12, 12, 13, 1);
   --doorhanger-hover-bg-color: rgba(237, 237, 237, 1);
   --doorhanger-separator-color: rgba(222, 222, 222, 1);
-  --overlay-button-border: 0 none;
-  --overlay-button-bg-color: rgba(12, 12, 13, 0.1);
-  --overlay-button-hover-bg-color: rgba(12, 12, 13, 0.3);
+  --dialog-button-border: 0 none;
+  --dialog-button-bg-color: rgba(12, 12, 13, 0.1);
+  --dialog-button-hover-bg-color: rgba(12, 12, 13, 0.3);
 
   --loading-icon: url(images/loading.svg);
   --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
@@ -146,8 +146,8 @@
     --doorhanger-hover-color: rgba(249, 249, 250, 1);
     --doorhanger-hover-bg-color: rgba(93, 94, 98, 1);
     --doorhanger-separator-color: rgba(92, 92, 97, 1);
-    --overlay-button-bg-color: rgba(92, 92, 97, 1);
-    --overlay-button-hover-bg-color: rgba(115, 115, 115, 1);
+    --dialog-button-bg-color: rgba(92, 92, 97, 1);
+    --dialog-button-hover-bg-color: rgba(115, 115, 115, 1);
 
     /* This image is used in <input> elements, which unfortunately means that
      * the `mask-image` approach used with all of the other images doesn't work
@@ -168,9 +168,9 @@
     --doorhanger-hover-color: ButtonFace;
     --doorhanger-border-color-whcm: 1px solid ButtonText;
     --doorhanger-triangle-opacity-whcm: 0;
-    --overlay-button-border: 1px solid Highlight;
-    --overlay-button-hover-bg-color: Highlight;
-    --overlay-button-hover-color: ButtonFace;
+    --dialog-button-border: 1px solid Highlight;
+    --dialog-button-hover-bg-color: Highlight;
+    --dialog-button-hover-color: ButtonFace;
     --field-border-color: ButtonText;
   }
 }
@@ -628,21 +628,21 @@ select {
 
 .toolbarButton,
 .secondaryToolbarButton,
-.overlayButton {
+.dialogButton {
   border: 0 none;
   background: none;
   width: 28px;
   height: 28px;
 }
 
-.overlayButton:hover,
-.overlayButton:focus-visible {
-  background-color: var(--overlay-button-hover-bg-color);
+.dialogButton:hover,
+.dialogButton:focus-visible {
+  background-color: var(--dialog-button-hover-bg-color);
 }
 
-.overlayButton:hover > span,
-.overlayButton:focus-visible > span {
-  color: var(--overlay-button-hover-color);
+.dialogButton:hover > span,
+.dialogButton:focus-visible > span {
+  color: var(--dialog-button-hover-color);
 }
 
 .toolbarButton > span {
@@ -654,7 +654,7 @@ select {
 
 .toolbarButton[disabled],
 .secondaryToolbarButton[disabled],
-.overlayButton[disabled] {
+.dialogButton[disabled] {
   opacity: 0.5;
 }
 
@@ -697,7 +697,7 @@ select {
 .toolbarButton,
 .dropdownToolbarButton,
 .secondaryToolbarButton,
-.overlayButton {
+.dialogButton {
   min-width: 16px;
   margin: 2px 1px;
   padding: 2px 6px 0;
@@ -1278,32 +1278,17 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   width: 98%;
 }
 
-.overlayButton {
+.dialogButton {
   width: auto;
   margin: 3px 4px 2px !important;
   padding: 2px 11px;
   color: var(--main-color);
-  background-color: var(--overlay-button-bg-color);
-  border: var(--overlay-button-border) !important;
+  background-color: var(--dialog-button-bg-color);
+  border: var(--dialog-button-border) !important;
 }
 
-#overlayContainer {
-  display: table;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.2);
-  z-index: 40000;
-}
-
-#overlayContainer > .container {
-  display: table-cell;
-  vertical-align: middle;
-  text-align: center;
-}
-
-#overlayContainer > .container > .dialog {
-  display: inline-block;
+dialog {
+  margin: auto;
   padding: 15px;
   border-spacing: 4px;
   color: var(--main-color);
@@ -1314,20 +1299,24 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   border-radius: 4px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
+dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.2);
+  user-select: none;
+}
 
-.dialog > .row {
+dialog > .row {
   display: table-row;
 }
 
-.dialog > .row > * {
+dialog > .row > * {
   display: table-cell;
 }
 
-.dialog .toolbarField {
+dialog .toolbarField {
   margin: 5px 0;
 }
 
-.dialog .separator {
+dialog .separator {
   display: block;
   margin: 4px 0;
   height: 1px;
@@ -1335,38 +1324,38 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   background-color: var(--separator-color);
 }
 
-.dialog .buttonRow {
+dialog .buttonRow {
   text-align: center;
   vertical-align: middle;
 }
 
-.dialog :link {
+dialog :link {
   color: rgba(255, 255, 255, 1);
 }
 
-#passwordOverlay > .dialog {
+#passwordDialog {
   text-align: center;
 }
-#passwordOverlay .toolbarField {
+#passwordDialog .toolbarField {
   width: 200px;
 }
 
-#documentPropertiesOverlay > .dialog {
+#documentPropertiesDialog {
   text-align: left;
 }
-#documentPropertiesOverlay .row > * {
+#documentPropertiesDialog .row > * {
   min-width: 100px;
   text-align: start;
 }
-#documentPropertiesOverlay .row > span {
+#documentPropertiesDialog .row > span {
   width: 125px;
   word-wrap: break-word;
 }
-#documentPropertiesOverlay .row > p {
+#documentPropertiesDialog .row > p {
   max-width: 225px;
   word-wrap: break-word;
 }
-#documentPropertiesOverlay .buttonRow {
+#documentPropertiesDialog .buttonRow {
   margin-top: 10px;
 }
 
diff --git a/web/viewer.html b/web/viewer.html
index 26c208d34..d3664c4a1 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -352,93 +352,87 @@ See https://github.com/adobe-type-tools/cmap-resources
 <!--#endif-->
       </div> <!-- mainContainer -->
 
-      <div id="overlayContainer" class="hidden">
-        <div id="passwordOverlay" class="container hidden">
-          <div class="dialog">
-            <div class="row">
-              <p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
-            </div>
-            <div class="row">
-              <input type="password" id="password" class="toolbarField">
-            </div>
-            <div class="buttonRow">
-              <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 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>
-        </div>
-        <div id="documentPropertiesOverlay" class="container hidden">
-          <div class="dialog">
-            <div class="row">
-              <span data-l10n-id="document_properties_file_name">File name:</span> <p id="fileNameField">-</p>
-            </div>
-            <div class="row">
-              <span data-l10n-id="document_properties_file_size">File size:</span> <p id="fileSizeField">-</p>
-            </div>
-            <div class="separator"></div>
-            <div class="row">
-              <span data-l10n-id="document_properties_title">Title:</span> <p id="titleField">-</p>
-            </div>
-            <div class="row">
-              <span data-l10n-id="document_properties_author">Author:</span> <p id="authorField">-</p>
-            </div>
-            <div class="row">
-              <span data-l10n-id="document_properties_subject">Subject:</span> <p id="subjectField">-</p>
-            </div>
-            <div class="row">
-              <span data-l10n-id="document_properties_keywords">Keywords:</span> <p id="keywordsField">-</p>
-            </div>
-            <div class="row">
-              <span data-l10n-id="document_properties_creation_date">Creation Date:</span> <p id="creationDateField">-</p>
-            </div>
-            <div class="row">
-              <span data-l10n-id="document_properties_modification_date">Modification Date:</span> <p id="modificationDateField">-</p>
-            </div>
-            <div class="row">
-              <span data-l10n-id="document_properties_creator">Creator:</span> <p id="creatorField">-</p>
-            </div>
-            <div class="separator"></div>
-            <div class="row">
-              <span data-l10n-id="document_properties_producer">PDF Producer:</span> <p id="producerField">-</p>
-            </div>
-            <div class="row">
-              <span data-l10n-id="document_properties_version">PDF Version:</span> <p id="versionField">-</p>
-            </div>
-            <div class="row">
-              <span data-l10n-id="document_properties_page_count">Page Count:</span> <p id="pageCountField">-</p>
-            </div>
-            <div class="row">
-              <span data-l10n-id="document_properties_page_size">Page Size:</span> <p id="pageSizeField">-</p>
-            </div>
-            <div class="separator"></div>
-            <div class="row">
-              <span data-l10n-id="document_properties_linearized">Fast Web View:</span> <p id="linearizedField">-</p>
-            </div>
-            <div class="buttonRow">
-              <button id="documentPropertiesClose" class="overlayButton"><span data-l10n-id="document_properties_close">Close</span></button>
-            </div>
+          <div class="row">
+            <input type="password" id="password" class="toolbarField">
           </div>
-        </div>
+          <div class="buttonRow">
+            <button id="passwordCancel" class="dialogButton"><span data-l10n-id="password_cancel">Cancel</span></button>
+            <button id="passwordSubmit" class="dialogButton"><span data-l10n-id="password_ok">OK</span></button>
+          </div>
+        </dialog>
+        <dialog id="documentPropertiesDialog">
+          <div class="row">
+            <span data-l10n-id="document_properties_file_name">File name:</span> <p id="fileNameField">-</p>
+          </div>
+          <div class="row">
+            <span data-l10n-id="document_properties_file_size">File size:</span> <p id="fileSizeField">-</p>
+          </div>
+          <div class="separator"></div>
+          <div class="row">
+            <span data-l10n-id="document_properties_title">Title:</span> <p id="titleField">-</p>
+          </div>
+          <div class="row">
+            <span data-l10n-id="document_properties_author">Author:</span> <p id="authorField">-</p>
+          </div>
+          <div class="row">
+            <span data-l10n-id="document_properties_subject">Subject:</span> <p id="subjectField">-</p>
+          </div>
+          <div class="row">
+            <span data-l10n-id="document_properties_keywords">Keywords:</span> <p id="keywordsField">-</p>
+          </div>
+          <div class="row">
+            <span data-l10n-id="document_properties_creation_date">Creation Date:</span> <p id="creationDateField">-</p>
+          </div>
+          <div class="row">
+            <span data-l10n-id="document_properties_modification_date">Modification Date:</span> <p id="modificationDateField">-</p>
+          </div>
+          <div class="row">
+            <span data-l10n-id="document_properties_creator">Creator:</span> <p id="creatorField">-</p>
+          </div>
+          <div class="separator"></div>
+          <div class="row">
+            <span data-l10n-id="document_properties_producer">PDF Producer:</span> <p id="producerField">-</p>
+          </div>
+          <div class="row">
+            <span data-l10n-id="document_properties_version">PDF Version:</span> <p id="versionField">-</p>
+          </div>
+          <div class="row">
+            <span data-l10n-id="document_properties_page_count">Page Count:</span> <p id="pageCountField">-</p>
+          </div>
+          <div class="row">
+            <span data-l10n-id="document_properties_page_size">Page Size:</span> <p id="pageSizeField">-</p>
+          </div>
+          <div class="separator"></div>
+          <div class="row">
+            <span data-l10n-id="document_properties_linearized">Fast Web View:</span> <p id="linearizedField">-</p>
+          </div>
+          <div class="buttonRow">
+            <button id="documentPropertiesClose" class="dialogButton"><span data-l10n-id="document_properties_close">Close</span></button>
+          </div>
+        </dialog>
 <!--#if !MOZCENTRAL-->
-        <div id="printServiceOverlay" class="container hidden">
-          <div class="dialog">
-            <div class="row">
-              <span data-l10n-id="print_progress_message">Preparing document for printing…</span>
-            </div>
-            <div class="row">
-              <progress value="0" max="100"></progress>
-              <span data-l10n-id="print_progress_percent" data-l10n-args='{ "progress": 0 }' class="relative-progress">0%</span>
-            </div>
-            <div class="buttonRow">
-              <button id="printCancel" class="overlayButton"><span data-l10n-id="print_progress_close">Cancel</span></button>
-            </div>
+        <dialog id="printServiceDialog">
+          <div class="row">
+            <span data-l10n-id="print_progress_message">Preparing document for printing…</span>
           </div>
-        </div>
+          <div class="row">
+            <progress value="0" max="100"></progress>
+            <span data-l10n-id="print_progress_percent" data-l10n-args='{ "progress": 0 }' class="relative-progress">0%</span>
+          </div>
+          <div class="buttonRow">
+            <button id="printCancel" class="dialogButton"><span data-l10n-id="print_progress_close">Cancel</span></button>
+          </div>
+        </dialog>
 <!--#endif-->
 <!--#if CHROME-->
 <!--#include viewer-snippet-chrome-overlays.html-->
 <!--#endif-->
-      </div>  <!-- overlayContainer -->
+      </div>  <!-- dialogContainer -->
 
     </div> <!-- outerContainer -->
     <div id="printContainer"></div>
diff --git a/web/viewer.js b/web/viewer.js
index ffa5b8d2c..b6b5b9b4c 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -161,16 +161,16 @@ function getViewerConfiguration() {
       findNextButton: document.getElementById("findNext"),
     },
     passwordOverlay: {
-      overlayName: "passwordOverlay",
-      container: document.getElementById("passwordOverlay"),
+      dialogName: "passwordDialog",
+      dialog: document.getElementById("passwordDialog"),
       label: document.getElementById("passwordText"),
       input: document.getElementById("password"),
       submitButton: document.getElementById("passwordSubmit"),
       cancelButton: document.getElementById("passwordCancel"),
     },
     documentProperties: {
-      overlayName: "documentPropertiesOverlay",
-      container: document.getElementById("documentPropertiesOverlay"),
+      dialogName: "documentPropertiesDialog",
+      dialog: document.getElementById("documentPropertiesDialog"),
       closeButton: document.getElementById("documentPropertiesClose"),
       fields: {
         fileName: document.getElementById("fileNameField"),