feat(Modal): Allow passing in an element selector to append mod… (#1817)

* feat(Modal): Allow passing in an element selector to append modal to

* feat(Modal): Rename  property to

* Update Modal.js

Make modal fallback to body if the specified container is not found

Co-authored-by: Evan Sharp <dumbdrum@gmail.com>

docs/lib/Components/ModalsPage.js

@@ -106,7 +106,9 @@ const ModalsPage = () => {
   // if modal should be destructed/removed from DOM after closing
   unmountOnClose: PropTypes.bool, // defaults to true
   // if the element which triggered the modal to open should focused after the modal closes (see example somewhere below)
-  returnFocusAfterClose: PropTypes.bool // defaults to true
+  returnFocusAfterClose: PropTypes.bool, // defaults to true
+  // container to append the modal to
+  container: PropTypes.string // css selector, defauls to "body"
 }`}
         </PrismCode>
       </pre>

src/Modal.js

@@ -57,7 +57,8 @@ const propTypes = {
     PropTypes.func,
   ]),
   unmountOnClose: PropTypes.bool,
-  returnFocusAfterClose: PropTypes.bool
+  returnFocusAfterClose: PropTypes.bool,
+  container: PropTypes.string
 };
 
 const propsToOmit = Object.keys(propTypes);
@@ -82,7 +83,8 @@ const defaultProps = {
     timeout: TransitionTimeouts.Fade, // uses standard fade transition
   },
   unmountOnClose: true,
-  returnFocusAfterClose: true
+  returnFocusAfterClose: true,
+  container: 'body'
 };
 
 class Modal extends React.Component {
@@ -290,7 +292,8 @@ class Modal extends React.Component {
       this._element.setAttribute('tabindex', '-1');
       this._element.style.position = 'relative';
       this._element.style.zIndex = this.props.zIndex;
-      document.body.appendChild(this._element);
+      this._mountContainer = document.querySelector(this.props.container) || document.querySelector('body');
+      this._mountContainer.appendChild(this._element);
     }
 
     this._originalBodyPadding = getOriginalBodyPadding();
@@ -308,7 +311,7 @@ class Modal extends React.Component {
 
   destroy() {
     if (this._element) {
-      document.body.removeChild(this._element);
+      this._mountContainer.removeChild(this._element);
       this._element = null;
     }