fix(MWPW-136057):background scrolls when modal is open fixed (#1234)

background scrolls when modal is open fixed
adobecom · Sep 11, 2023 · 4ca99ec · 4ca99ec
1 parent 4d31417
commit 4ca99ec
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/libs/blocks/modal/modal.css b/libs/blocks/modal/modal.css
@@ -150,6 +150,10 @@
   column-count: 1;
 }
 
+.modal-open {
+  overflow: hidden;
+}
+
 @media (min-width: 600px) {
   .dialog-modal {
     max-width: 80vw;

diff --git a/libs/blocks/modal/modal.js b/libs/blocks/modal/modal.js
@@ -34,6 +34,7 @@ export function sendAnalytics(event) {
 function closeModal(modal) {
   const { id } = modal;
   const closeEvent = new Event('milo:modal:closed');
+  document.body.classList.remove('modal-open');
   window.dispatchEvent(closeEvent);
   const localeModal = id?.includes('locale-modal') ? 'localeModal' : 'milo';
   const analyticsEventName = window.location.hash ? window.location.hash.replace('#', '') : localeModal;
@@ -107,7 +108,7 @@ export async function sendViewportDimensionsOnRequest(messageInfo) {
 
 export async function getModal(details, custom) {
   if (!(details?.path || custom)) return null;
-
+  document.body.classList.add('modal-open');
   const { id } = details || custom;
 
   const dialog = createTag('div', { class: 'dialog-modal', id });