diff --git a/docs/index.md b/docs/index.md index 4e8a296e..99f4dcbd 100644 --- a/docs/index.md +++ b/docs/index.md @@ -90,7 +90,7 @@ 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. @@ -98,7 +98,7 @@ import ReactModal from 'react-modal'; 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 index 35e9837e..8f673af1 100644 --- 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 );