diff --git a/blocks/modal/modal.css b/blocks/modal/modal.css
index d9624e09..7b115c98 100644
--- 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
index 0b6f985c..f94efddb 100644
--- 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');
     },
   };
 }