From 0904daea689012d87e22aa0dc08a6dc7bb4e8303 Mon Sep 17 00:00:00 2001 From: Aravindo Wingeier Date: Fri, 19 Jan 2024 10:06:18 -0800 Subject: [PATCH] Prevent background scrolling when a modal is open (#38) --- blocks/modal/modal.css | 4 ++++ blocks/modal/modal.js | 7 ++++++- 2 files changed, 10 insertions(+), 1 deletion(-) 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'); }, }; }