[fixed]: css class added to root document in iframe

reactjs · Sep 16, 2022 · 9bf0d4f · 9bf0d4f
1 parent 4030935
commit 9bf0d4f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/docs/index.md b/docs/index.md
@@ -90,15 +90,15 @@ import ReactModal from 'react-modal';
 
   bodyOpenClassName={
     "ReactModal__Body--open"
-  /* String className to be applied to the document.body
+  /* String className to be applied to the modal ownerDocument.body
      (must be a constant string).
      This attribute when set as `null` doesn't add any class
      to document.body.
      See the `Styles` section for more details. */}
 
   htmlOpenClassName={
     "ReactModal__Html--open"
-  /* String className to be applied to the document.html
+  /* String className to be applied to the modal ownerDocument.html
      (must be a constant string).
      This attribute is `null` by default.
      See the `Styles` section for more details. */}

diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
@@ -43,6 +43,7 @@ export default class ModalPortal extends Component {
     }),
     className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     overlayClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    parentSelector: PropTypes.func,
     bodyOpenClassName: PropTypes.string,
     htmlOpenClassName: PropTypes.string,
     ariaHideApp: PropTypes.bool,
@@ -149,15 +150,19 @@ export default class ModalPortal extends Component {
       appElement,
       ariaHideApp,
       htmlOpenClassName,
-      bodyOpenClassName
+      bodyOpenClassName,
+      parentSelector
     } = this.props;
 
+    const parentDocument =
+      (parentSelector && parentSelector().ownerDocument) || document;
+
     // Add classes.
-    bodyOpenClassName && classList.add(document.body, bodyOpenClassName);
+    bodyOpenClassName && classList.add(parentDocument.body, bodyOpenClassName);
 
     htmlOpenClassName &&
       classList.add(
-        document.getElementsByTagName("html")[0],
+        parentDocument.getElementsByTagName("html")[0],
         htmlOpenClassName
       );
 
@@ -174,15 +179,20 @@ export default class ModalPortal extends Component {
       appElement,
       ariaHideApp,
       htmlOpenClassName,
-      bodyOpenClassName
+      bodyOpenClassName,
+      parentSelector
     } = this.props;
 
+    const parentDocument =
+      (parentSelector && parentSelector().ownerDocument) || document;
+
     // Remove classes.
-    bodyOpenClassName && classList.remove(document.body, bodyOpenClassName);
+    bodyOpenClassName &&
+      classList.remove(parentDocument.body, bodyOpenClassName);
 
     htmlOpenClassName &&
       classList.remove(
-        document.getElementsByTagName("html")[0],
+        parentDocument.getElementsByTagName("html")[0],
         htmlOpenClassName
       );