Merge pull request #1559 from Kajabi/SAGE-518/qj-modal-scroll-backgro…

…und-when-open [SAGE-518] Modal - remove ability to scroll background when modal is open
Kajabi · Aug 22, 2022 · 90a6b82 · 90a6b82
2 parents 70d57f1 + d1be6eb
commit 90a6b82
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/packages/sage-assets/lib/stylesheets/layout/_page.scss b/packages/sage-assets/lib/stylesheets/layout/_page.scss
@@ -23,6 +23,6 @@ $-banner-height-offset: map-get($sage-banner-heights, default);
   margin-bottom: sage-spacing();
 }
 
-.sage-page__has-open-modal {
+.sage-page--has-open-modal {
   overflow-y: hidden;
 }
diff --git a/packages/sage-react/lib/Modal/Modal.jsx b/packages/sage-react/lib/Modal/Modal.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { ModalBody } from './ModalBody';
@@ -36,6 +36,14 @@ export const Modal = ({
     }
   );
 
+  useEffect(() => {
+    if (active) {
+      document.body.classList.add('sage-page--has-open-modal');
+    }
+
+    return () => { document.body.classList.remove('sage-page--has-open-modal'); };
+  });
+
   let animationAttributes = {};
 
   if (animation) {

diff --git a/packages/sage-system/lib/modal.js b/packages/sage-system/lib/modal.js
@@ -11,7 +11,7 @@ Sage.modal = (function() {
   const SELECTOR_MODAL_REMOVE_CONTENTS_ON_CLOSE = "data-js-modal-remove-content-on-close";
   const SELECTOR_MODAL_CLOSE = "data-js-modal-close";
   const SELECTOR_MODALTRIGGER = "data-js-modaltrigger";
-  const SELECTOR_PAGE_HAS_OPEN_MODAL = "sage-page__has-open-modal";
+  const SELECTOR_PAGE_HAS_OPEN_MODAL = "sage-page--has-open-modal";
   const SELECTOR_FOCUSABLE_ELEMENTS = "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type='text']:not([disabled]), input[type='radio']:not([disabled]), input[type='checkbox']:not([disabled]), select:not([disabled])";
   const MODAL_ACTIVE_CLASS = "sage-modal--active";
   const EVENT_CLOSEALL = "sage.modal.closeAll";