eds-406 fixed problem connect with dialog

hlxsites · Sep 20, 2024 · ce5c01b · ce5c01b
1 parent 5fdefd3
commit ce5c01b
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 52 deletions.
diff --git a/blocks/modal/modal.css b/blocks/modal/modal.css
@@ -1,53 +1,52 @@
 body.modal-open {
-    overflow: hidden;
-  }
-
+  overflow: hidden;
+}
+
+.modal dialog {
+  --dialog-border-radius: 16px;
+  padding: 0;
+  overscroll-behavior: none;
+  border: 1px solid #ccc;
+  border-radius: var(--dialog-border-radius);
+  width: 100vw;
+}
+
+.modal dialog .modal-content {
+  overflow-y: auto;
+  overscroll-behavior: none;
+  max-height: calc(100dvh - 60px);
+}
+
+@media (width >= 600px) {
   .modal dialog {
-    --dialog-border-radius: 16px;
-
-    overscroll-behavior: none;
-    border: 1px solid #ccc;
-    border-radius: var(--dialog-border-radius);
-    width: 100vw;
+    width: 80vw;
+    max-width: 730px;
   }
-  
+
   .modal dialog .modal-content {
-    overflow-y: auto;
-    overscroll-behavior: none;
-    max-height: calc(100dvh - 60px);
-  }
-
-  @media (width >= 600px) {
-    .modal dialog {
-      padding: 30px;
-      width: 80vw;
-      max-width: 700px;
-    }
-
-    .modal dialog .modal-content {
-      max-height: calc(100vh - 90px);
-    }
-  }
-
-  .modal dialog::backdrop {
-    background-color: rgb(0 0 0 / 50%);
-  }
-
-  .modal .close-button {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 20px;
-    height: 100%;
-    max-height: 54px;
-    border-radius: 0 var(--dialog-border-radius) 0 0;
-    background-color: unset;
-    text-overflow: clip;
-    margin: 0;
-    border: none;
-    padding-right: 30px;
+    max-height: calc(100vh - 90px);
   }
-
-  .modal dialog .section {
-    padding: 0;
-  }
+}
+
+.modal dialog::backdrop {
+  background-color: rgb(0 0 0 / 50%);
+}
+
+.modal .close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 100%;
+  max-height: 54px;
+  border-radius: 0 var(--dialog-border-radius) 0 0;
+  background-color: unset;
+  text-overflow: clip;
+  margin: 0;
+  border: none;
+  padding-right: 30px;
+}
+
+.modal dialog .section {
+  padding: 0;
+}
diff --git a/blocks/modal/modal.js b/blocks/modal/modal.js
@@ -24,10 +24,9 @@ export async function createModal(contentNodes) {
   dialog.append(closeButton);
 
   // close dialog on clicks outside the dialog. https://stackoverflow.com/a/70593278/79461
-  dialog.addEventListener('click', (event) => {
-    const dialogDimensions = dialog.getBoundingClientRect();
-    if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right
-      || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
+ // If you confirm this implementation, then I suggest removing the comment. 
+  dialog.addEventListener("click", (event) => {
+    if (event.target === dialog) {
       dialog.close();
     }
   });