feat: Use modal dialog

Author: MoritzWeber0

assets/js/dialog.js

@@ -1,9 +1,3 @@
-import {
-  openOverlay,
-  closeOverlay,
-  addOverlayClickListener,
-} from "./overlay.js";
-
 function getCloseButton(dialog) {
   return dialog.querySelector(".o-dialog__header > .a-button");
 }
@@ -12,31 +6,23 @@ function openDialog(dialogId) {
   const dialog = document.getElementById(dialogId);
   if (!dialog) return;
 
-  dialog.show();
-  openOverlay("dialog");
-
-  const closeButton = getCloseButton(dialog);
-  if (closeButton) {
-    closeButton.addEventListener("click", () => closeDialog(dialog));
-  }
+  dialog.showModal();
 }
 
-function closeDialog(dialog) {
-  const closeButton = getCloseButton(dialog);
-  if (closeButton) {
-    closeButton.replaceWith(closeButton.cloneNode(true));
-  }
-  dialog.close();
-  closeOverlay();
-}
+function initDialogs() {
+  document.querySelectorAll("dialog").forEach((dialog) => {
+    dialog.addEventListener("click", (e) => {
+      if (e.target === dialog) {
+        dialog.close();
+      }
+    });
 
-function closeAllDialogs() {
-  document.querySelectorAll("dialog[open]").forEach((dialog) => {
-    closeDialog(dialog);
+    const closeButton = getCloseButton(dialog);
+    if (closeButton) {
+      closeButton.addEventListener("click", () => dialog.close());
+    }
   });
-}
 
-function initDialogs() {
   document.querySelectorAll("[data-dialog-trigger]").forEach((trigger) => {
     const handler = (e) => {
       if (e.type === "click" || (e.type === "keydown" && e.key === "Enter")) {
@@ -49,16 +35,6 @@ function initDialogs() {
     trigger.addEventListener("click", handler);
     trigger.addEventListener("keydown", handler);
   });
-
-  addOverlayClickListener(() => {
-    closeAllDialogs();
-  });
-
-  document.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") {
-      closeAllDialogs();
-    }
-  });
 }
 
 if (document.readyState === "loading") {

assets/sass/dialog.scss

@@ -22,16 +22,18 @@
 
   &__wrapper {
     width: fit-content;
-    position: fixed;
-    top: 7rem;
     border: none;
     padding: 0;
     background-color: var(--bg-default);
     color: var(--color-body);
     border-radius: var(--border-radius-m);
-    z-index: 12;
     border: var(--border);
     overflow: hidden;
+
+    &::backdrop {
+      background-color: rgba(0, 0, 0, 0.6);
+      backdrop-filter: blur(4px);
+    }
   }
 
   &__header {