Prevent background scrolling when a modal is open (#38)

adobe · Jan 19, 2024 · 0904dae · 0904dae
1 parent c6e3892
commit 0904dae
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/blocks/modal/modal.css b/blocks/modal/modal.css
@@ -1,3 +1,7 @@
+body.modal-open {
+  overflow: hidden;
+}
+
 .modal dialog {
   --dialog-border-radius: 16px;
 

diff --git a/blocks/modal/modal.js b/blocks/modal/modal.js
@@ -38,7 +38,10 @@ export async function createModal(contentNodes) {
   await loadBlock(block);
   decorateIcons(closeButton);
 
-  dialog.addEventListener('close', () => block.remove());
+  dialog.addEventListener('close', () => {
+    document.body.classList.remove('modal-open');
+    block.remove();
+  });
 
   block.append(dialog);
   return {
@@ -48,6 +51,8 @@ export async function createModal(contentNodes) {
       // Google Chrome restores the scroll position when the dialog is reopened,
       // so we need to reset it.
       setTimeout(() => { dialogContent.scrollTop = 0; }, 0);
+
+      document.body.classList.add('modal-open');
     },
   };
 }