From 645ceb4fdd725d700d8893bc8ad3c9dbfc4e563d Mon Sep 17 00:00:00 2001
From: Michael LoTurco <mikeloturco13@gmail.com>
Date: Fri, 23 Feb 2018 14:23:38 -0500
Subject: [PATCH] feat(modal): use portals

render modal at top-level in dom via
a portal instead of inside parent
component

BREAKING CHANGE: Modal now renders through a Portal, this may cause failures in tests or styling rules that expect the modal in specific places in the dom tree
---
 .storybook/Storyshots.test.js                 |   5 +-
 .../__snapshots__/Storyshots.test.js.snap     | 770 +-----------------
 src/Modal/Modal.stories.jsx                   |  53 ++
 src/Modal/Modal.test.jsx                      |  57 +-
 src/Modal/README.md                           |   3 +
 src/Modal/index.jsx                           | 103 ++-
 6 files changed, 213 insertions(+), 778 deletions(-)

diff --git a/.storybook/Storyshots.test.js b/.storybook/Storyshots.test.js
index 386a84488a..d116e2972b 100644
--- a/.storybook/Storyshots.test.js
+++ b/.storybook/Storyshots.test.js
@@ -7,7 +7,10 @@ jest.mock("react-dom", () => {
     render: () => null,
     unmountComponentAtNode: () => null,
     findDOMNode: () => null,
+    createPortal: () => null,
   };
 });
 
-initStoryshots();
+initStoryshots({
+  storyKindRegex: /^((?!.*?Modal).)*$/,
+});
diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap
index b8c121b48a..4f403fed5e 100644
--- a/.storybook/__snapshots__/Storyshots.test.js.snap
+++ b/.storybook/__snapshots__/Storyshots.test.js.snap
@@ -20734,710 +20734,6 @@ exports[`Storyshots MailtoLink with subject and body 1`] = `
 </div>
 `;
 
-exports[`Storyshots Modal basic usage 1`] = `
-<div
-  aria-labelledby="id33"
-  aria-modal={true}
-  className="modal modal-open modal-backdrop show"
-  role="dialog"
->
-  <div
-    className="modal-dialog"
-  >
-    <div
-      className="modal-content"
-    >
-      <div
-        className="modal-header"
-      >
-        <h2
-          className="modal-title"
-          id="id33"
-        >
-          Modal title.
-        </h2>
-        <button
-          aria-label="Close"
-          className="p-1 btn"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <div>
-            <span
-              aria-hidden={true}
-              className="fa fa-times"
-              id="Icon1"
-            />
-          </div>
-        </button>
-      </div>
-      <div
-        className="modal-body"
-      >
-        <p>
-          Modal body.
-        </p>
-      </div>
-      <div
-        className="modal-footer"
-      >
-        <button
-          className="btn btn-outline-primary"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          Close
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Modal configurable buttons 1`] = `
-<div
-  aria-labelledby="id34"
-  aria-modal={true}
-  className="modal modal-open modal-backdrop show"
-  role="dialog"
->
-  <div
-    className="modal-dialog"
-  >
-    <div
-      className="modal-content"
-    >
-      <div
-        className="modal-header"
-      >
-        <h2
-          className="modal-title"
-          id="id34"
-        >
-          Modal title.
-        </h2>
-        <button
-          aria-label="Close"
-          className="p-1 btn"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <div>
-            <span
-              aria-hidden={true}
-              className="fa fa-times"
-              id="Icon1"
-            />
-          </div>
-        </button>
-      </div>
-      <div
-        className="modal-body"
-      >
-        <p>
-          Modal body.
-        </p>
-      </div>
-      <div
-        className="modal-footer"
-      >
-        <button
-          className="btn btn-primary"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          Blue button!
-        </button>
-        <button
-          className="btn btn-danger"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          Red button!
-        </button>
-        <button
-          className="btn btn-success"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          Green button!
-        </button>
-        <button
-          className="btn btn-outline-primary"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          Close
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Modal configurable buttons that perform actions 1`] = `
-<div
-  aria-labelledby="id36"
-  aria-modal={true}
-  className="modal modal-open modal-backdrop show"
-  role="dialog"
->
-  <div
-    className="modal-dialog"
-  >
-    <div
-      className="modal-content"
-    >
-      <div
-        className="modal-header"
-      >
-        <h2
-          className="modal-title"
-          id="id36"
-        >
-          Modal title.
-        </h2>
-        <button
-          aria-label="Close"
-          className="p-1 btn"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <div>
-            <span
-              aria-hidden={true}
-              className="fa fa-times"
-              id="Icon1"
-            />
-          </div>
-        </button>
-      </div>
-      <div
-        className="modal-body"
-      >
-        <p>
-          Modal body.
-        </p>
-      </div>
-      <div
-        className="modal-footer"
-      >
-        <button
-          className="btn btn-light"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          Click me and check the console!
-        </button>
-        <button
-          className="btn btn-outline-primary"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          Close
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Modal configurable close button 1`] = `
-<div
-  aria-labelledby="id37"
-  aria-modal={true}
-  className="modal modal-open modal-backdrop show"
-  role="dialog"
->
-  <div
-    className="modal-dialog"
-  >
-    <div
-      className="modal-content"
-    >
-      <div
-        className="modal-header"
-      >
-        <h2
-          className="modal-title"
-          id="id37"
-        >
-          Modal title.
-        </h2>
-        <button
-          aria-label="SHOO!"
-          className="p-1 btn"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <div>
-            <span
-              aria-hidden={true}
-              className="fa fa-times"
-              id="Icon1"
-            />
-          </div>
-        </button>
-      </div>
-      <div
-        className="modal-body"
-      >
-        <p>
-          Modal body.
-        </p>
-      </div>
-      <div
-        className="modal-footer"
-      >
-        <button
-          className="btn btn-outline-primary"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          SHOO!
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Modal configurable title and body 1`] = `
-<div
-  aria-labelledby="id35"
-  aria-modal={true}
-  className="modal modal-open modal-backdrop show"
-  role="dialog"
->
-  <div
-    className="modal-dialog"
-  >
-    <div
-      className="modal-content"
-    >
-      <div
-        className="modal-header"
-      >
-        <h2
-          className="modal-title"
-          id="id35"
-        >
-          Custom title!
-        </h2>
-        <button
-          aria-label="Close"
-          className="p-1 btn"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <div>
-            <span
-              aria-hidden={true}
-              className="fa fa-times"
-              id="Icon1"
-            />
-          </div>
-        </button>
-      </div>
-      <div
-        className="modal-body"
-      >
-        <p>
-          Custom body!
-        </p>
-      </div>
-      <div
-        className="modal-footer"
-      >
-        <button
-          className="btn btn-dark"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          Dark button!
-        </button>
-        <button
-          className="btn btn-outline-primary"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          Close
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Modal modal invoked via a button 1`] = `
-<div>
-  <div
-    aria-labelledby="id38"
-    aria-modal={true}
-    className="modal fade"
-    role="dialog"
-  >
-    <div
-      className="modal-dialog"
-    >
-      <div
-        className="modal-content"
-      >
-        <div
-          className="modal-header"
-        >
-          <h2
-            className="modal-title"
-            id="id38"
-          >
-            I am the modal!
-          </h2>
-          <button
-            aria-label="Close"
-            className="p-1 btn"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <div>
-              <span
-                aria-hidden={true}
-                className="fa fa-times"
-                id="Icon1"
-              />
-            </div>
-          </button>
-        </div>
-        <div
-          className="modal-body"
-        >
-          <p>
-            I was invoked by a button!
-          </p>
-        </div>
-        <div
-          className="modal-footer"
-        >
-          <button
-            className="btn btn-outline-primary"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <button
-    className="btn btn-light"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    type="button"
-  >
-    Click me to open a modal!
-  </button>
-</div>
-`;
-
-exports[`Storyshots Modal modal with element body 1`] = `
-<div
-  aria-labelledby="id39"
-  aria-modal={true}
-  className="modal modal-open modal-backdrop show"
-  role="dialog"
->
-  <div
-    className="modal-dialog"
-  >
-    <div
-      className="modal-content"
-    >
-      <div
-        className="modal-header"
-      >
-        <h2
-          className="modal-title"
-          id="id39"
-        >
-          Modal title.
-        </h2>
-        <button
-          aria-label="Close"
-          className="p-1 btn"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <div>
-            <span
-              aria-hidden={true}
-              className="fa fa-times"
-              id="Icon1"
-            />
-          </div>
-        </button>
-      </div>
-      <div
-        className="modal-body"
-      >
-        <div>
-          <p>
-            Enter your e-mail address to receive free cat facts!
-          </p>
-          <div
-            className={
-              Array [
-                "form-group",
-              ]
-            }
-          >
-            <label
-              className={
-                Array [
-                  "",
-                ]
-              }
-              htmlFor="asInput40"
-              id="label-asInput40"
-            >
-              E-Mail Address
-            </label>
-            <input
-              aria-describedby="error-asInput40"
-              aria-invalid={false}
-              autoComplete="on"
-              className="form-control is-invalid-nodanger"
-              disabled={false}
-              id="asInput40"
-              name="e-mail"
-              onBlur={[Function]}
-              onChange={[Function]}
-              placeholder={undefined}
-              required={false}
-              themes={Array []}
-              type="text"
-              value=""
-            />
-            <div
-              aria-live="polite"
-              className="invalid-feedback invalid-feedback-nodanger"
-              id="error-asInput40"
-            >
-              <span />
-            </div>
-          </div>
-          <button
-            className="btn"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Get my facts!
-          </button>
-        </div>
-      </div>
-      <div
-        className="modal-footer"
-      >
-        <button
-          className="btn btn-outline-primary"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          Close
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Modal modal with warning variant 1`] = `
-<div
-  aria-labelledby="id42"
-  aria-modal={true}
-  className="modal modal-open modal-backdrop show"
-  role="dialog"
->
-  <div
-    className="modal-dialog"
-  >
-    <div
-      className="modal-content"
-    >
-      <div
-        className="modal-header"
-      >
-        <h2
-          className="modal-title"
-          id="id42"
-        >
-          Warning Modal
-        </h2>
-        <button
-          aria-label="Run Away!"
-          className="p-1 btn"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <div>
-            <span
-              aria-hidden={true}
-              className="fa fa-times"
-              id="Icon1"
-            />
-          </div>
-        </button>
-      </div>
-      <div
-        className="modal-body"
-      >
-        <div
-          className="container-fluid"
-        >
-          <div
-            className="row"
-          >
-            <div
-              className="col-md-10"
-            >
-              <div>
-                <p>
-                  Be careful! It is dangerous ahead.
-                </p>
-              </div>
-            </div>
-            <div
-              className="col"
-            >
-              <div>
-                <span
-                  aria-hidden={true}
-                  className="fa fa-exclamation-triangle fa-3x text-warning"
-                  id="Modal-WARNING43"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="modal-footer"
-      >
-        <button
-          className="btn btn-light"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          Continue anyway...
-        </button>
-        <button
-          className="btn btn-outline-primary"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          Run Away!
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Modal modal without a close button in the header 1`] = `
-<div
-  aria-labelledby="id41"
-  aria-modal={true}
-  className="modal modal-open modal-backdrop show"
-  role="dialog"
-  tabIndex="-1"
->
-  <div
-    className="modal-dialog"
-  >
-    <div
-      className="modal-content"
-    >
-      <div
-        className="modal-header"
-      >
-        <h2
-          className="modal-title"
-          id="id41"
-        >
-          Modal title.
-        </h2>
-      </div>
-      <div
-        className="modal-body"
-      >
-        <p>
-          Modal body.
-        </p>
-      </div>
-      <div
-        className="modal-footer"
-      >
-        <button
-          className="btn btn-outline-primary"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          Close
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Storyshots Paragon Welcome 1`] = `
 <div
   className="css-jail"
@@ -25708,10 +25004,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
   >
     <li
       className="nav-item"
-      id="tab-label-tabInterface44-0"
+      id="tab-label-tabInterface33-0"
     >
       <a
-        aria-controls="tab-panel-tabInterface44-0"
+        aria-controls="tab-panel-tabInterface33-0"
         aria-selected={true}
         className="nav-link active"
         onClick={[Function]}
@@ -25723,10 +25019,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
     </li>
     <li
       className="nav-item"
-      id="tab-label-tabInterface44-1"
+      id="tab-label-tabInterface33-1"
     >
       <a
-        aria-controls="tab-panel-tabInterface44-1"
+        aria-controls="tab-panel-tabInterface33-1"
         aria-selected={false}
         className="nav-link"
         onClick={[Function]}
@@ -25738,10 +25034,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
     </li>
     <li
       className="nav-item"
-      id="tab-label-tabInterface44-2"
+      id="tab-label-tabInterface33-2"
     >
       <a
-        aria-controls="tab-panel-tabInterface44-2"
+        aria-controls="tab-panel-tabInterface33-2"
         aria-selected={false}
         className="nav-link"
         onClick={[Function]}
@@ -25757,9 +25053,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
   >
     <div
       aria-hidden={false}
-      aria-labelledby="tab-label-tabInterface44-0"
+      aria-labelledby="tab-label-tabInterface33-0"
       className="tab-pane active"
-      id="tab-panel-tabInterface44-0"
+      id="tab-panel-tabInterface33-0"
       role="tabpanel"
     >
       <div>
@@ -25768,9 +25064,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
     </div>
     <div
       aria-hidden={true}
-      aria-labelledby="tab-label-tabInterface44-1"
+      aria-labelledby="tab-label-tabInterface33-1"
       className="tab-pane"
-      id="tab-panel-tabInterface44-1"
+      id="tab-panel-tabInterface33-1"
       role="tabpanel"
     >
       <div>
@@ -25779,9 +25075,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
     </div>
     <div
       aria-hidden={true}
-      aria-labelledby="tab-label-tabInterface44-2"
+      aria-labelledby="tab-label-tabInterface33-2"
       className="tab-pane"
-      id="tab-panel-tabInterface44-2"
+      id="tab-panel-tabInterface33-2"
       role="tabpanel"
     >
       <div>
@@ -25806,8 +25102,8 @@ exports[`Storyshots Textarea label as element 1`] = `
         "",
       ]
     }
-    htmlFor="asInput48"
-    id="label-asInput48"
+    htmlFor="asInput37"
+    id="label-asInput37"
   >
     <span
       lang="en"
@@ -25816,11 +25112,11 @@ exports[`Storyshots Textarea label as element 1`] = `
     </span>
   </label>
   <textarea
-    aria-describedby="error-asInput48"
+    aria-describedby="error-asInput37"
     aria-invalid={false}
     className="form-control is-invalid-nodanger"
     disabled={false}
-    id="asInput48"
+    id="asInput37"
     name="username"
     onBlur={[Function]}
     onChange={[Function]}
@@ -25836,7 +25132,7 @@ exports[`Storyshots Textarea label as element 1`] = `
   <div
     aria-live="polite"
     className="invalid-feedback invalid-feedback-nodanger"
-    id="error-asInput48"
+    id="error-asInput37"
   >
     <span />
   </div>
@@ -25857,17 +25153,17 @@ exports[`Storyshots Textarea minimal usage 1`] = `
         "",
       ]
     }
-    htmlFor="asInput45"
-    id="label-asInput45"
+    htmlFor="asInput34"
+    id="label-asInput34"
   >
     First Name
   </label>
   <textarea
-    aria-describedby="error-asInput45"
+    aria-describedby="error-asInput34"
     aria-invalid={false}
     className="form-control is-invalid-nodanger"
     disabled={false}
-    id="asInput45"
+    id="asInput34"
     name="name"
     onBlur={[Function]}
     onChange={[Function]}
@@ -25883,7 +25179,7 @@ exports[`Storyshots Textarea minimal usage 1`] = `
   <div
     aria-live="polite"
     className="invalid-feedback invalid-feedback-nodanger"
-    id="error-asInput45"
+    id="error-asInput34"
   >
     <span />
   </div>
@@ -25904,17 +25200,17 @@ exports[`Storyshots Textarea scrollable 1`] = `
         "",
       ]
     }
-    htmlFor="asInput46"
-    id="label-asInput46"
+    htmlFor="asInput35"
+    id="label-asInput35"
   >
     Information
   </label>
   <textarea
-    aria-describedby="error-asInput46"
+    aria-describedby="error-asInput35"
     aria-invalid={false}
     className="form-control is-invalid-nodanger"
     disabled={false}
-    id="asInput46"
+    id="asInput35"
     name="name"
     onBlur={[Function]}
     onChange={[Function]}
@@ -25930,7 +25226,7 @@ exports[`Storyshots Textarea scrollable 1`] = `
   <div
     aria-live="polite"
     className="invalid-feedback invalid-feedback-nodanger"
-    id="error-asInput46"
+    id="error-asInput35"
   >
     <span />
   </div>
@@ -25951,17 +25247,17 @@ exports[`Storyshots Textarea validation 1`] = `
         "",
       ]
     }
-    htmlFor="asInput47"
-    id="label-asInput47"
+    htmlFor="asInput36"
+    id="label-asInput36"
   >
     Username
   </label>
   <textarea
-    aria-describedby="error-asInput47 description-asInput47"
+    aria-describedby="error-asInput36 description-asInput36"
     aria-invalid={false}
     className="form-control is-invalid-nodanger"
     disabled={false}
-    id="asInput47"
+    id="asInput36"
     name="username"
     onBlur={[Function]}
     onChange={[Function]}
@@ -25977,13 +25273,13 @@ exports[`Storyshots Textarea validation 1`] = `
   <div
     aria-live="polite"
     className="invalid-feedback invalid-feedback-nodanger"
-    id="error-asInput47"
+    id="error-asInput36"
   >
     <span />
   </div>
   <small
     className="form-text"
-    id="description-asInput47"
+    id="description-asInput36"
   >
     The unique name that identifies you throughout the site.
   </small>
diff --git a/src/Modal/Modal.stories.jsx b/src/Modal/Modal.stories.jsx
index 07c668124f..e70a23bf9f 100644
--- a/src/Modal/Modal.stories.jsx
+++ b/src/Modal/Modal.stories.jsx
@@ -34,6 +34,7 @@ class ModalWrapper extends React.Component {
           open={this.state.open}
           title={this.props.title}
           body={this.props.body}
+          parentSelector={this.props.parentSelector}
           onClose={this.resetModalWrapperState}
         />
         <Button
@@ -50,6 +51,11 @@ class ModalWrapper extends React.Component {
 ModalWrapper.propTypes = {
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
   body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  parentSelector: PropTypes.string,
+};
+
+ModalWrapper.defaultProps = {
+  parentSelector: 'body',
 };
 
 storiesOf('Modal', module)
@@ -172,4 +178,51 @@ storiesOf('Modal', module)
       onClose={() => {}}
       variant={{ status: Variant.status.WARNING }}
     />
+  ))
+  .add('modal inside special div', () => (
+    <div>
+      <div>
+        <div className="special-div" />
+      </div>
+      <ModalWrapper
+        title="I am the modal!"
+        body="I was invoked by a button!"
+        parentSelector=".special-div"
+      />
+    </div>
+  ))
+  .add('two modals with the same target', () => (
+    <div>
+      <div>
+        <div className="target-div" />
+      </div>
+      <ModalWrapper
+        title="I am the first modal!"
+        body="I target one"
+        parentSelector=".target-div"
+      />
+      <ModalWrapper
+        title="I am the second modal!"
+        body="I target one"
+        parentSelector=".target-div"
+      />
+    </div>
+  ))
+  .add('two modals with seperate targets', () => (
+    <div>
+      <div>
+        <div className="target-div-one" />
+        <div className="target-div-two" />
+      </div>
+      <ModalWrapper
+        title="I am the first modal!"
+        body="I target one"
+        parentSelector=".target-div-one"
+      />
+      <ModalWrapper
+        title="I am the second modal!"
+        body="I target two"
+        parentSelector=".target-div-two"
+      />
+    </div>
   ));
diff --git a/src/Modal/Modal.test.jsx b/src/Modal/Modal.test.jsx
index b18a61c4d4..c40375e4eb 100644
--- a/src/Modal/Modal.test.jsx
+++ b/src/Modal/Modal.test.jsx
@@ -1,14 +1,52 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
+import PropTypes from 'prop-types';
 import { mount } from 'enzyme';
 
 import Modal from './index';
 import Button from '../Button';
 import Variant from '../utils/constants';
 
+class ErrorBoundary extends React.Component {
+  // Used to test Errors thrown during invalid props tests
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  componentDidCatch(error, info) {
+    // Display fallback UI
+    this.setState({ hasError: true, error, info });
+  }
+
+  render() {
+    if (this.state.hasError && this.state.error && this.state.info) {
+      // You can render any custom fallback UI
+      return (
+        <h1 className="error-occured">
+          An Error Occurred.
+        </h1>
+      );
+    }
+    return this.props.children;
+  }
+}
+ErrorBoundary.propTypes = {
+  children: PropTypes.node,
+};
+ErrorBoundary.defaultProps = {
+  children: null,
+};
+
+const ErrorWrappedModal = props => (
+  <ErrorBoundary>
+    <Modal {...props} />
+  </ErrorBoundary>
+);
+
 const modalOpen = (isOpen, wrapper) => {
-  expect(wrapper.find('.modal').hasClass('modal-open')).toEqual(isOpen);
-  expect(wrapper.find('.modal').hasClass('modal-backdrop')).toEqual(isOpen);
+  expect(wrapper.find('.modal').hasClass('d-block')).toEqual(isOpen);
+  expect(wrapper.find('.modal-backdrop').exists()).toEqual(isOpen);
   expect(wrapper.find('.modal').hasClass('show')).toEqual(isOpen);
   expect(wrapper.find('.modal').hasClass('fade')).toEqual(!isOpen);
   expect(wrapper.state('open')).toEqual(isOpen);
@@ -92,6 +130,14 @@ describe('<Modal />', () => {
   });
 
   describe('props received correctly', () => {
+    beforeEach(() => {
+      // This is a gross hack to suppress error logs in the invalid parentSelector test
+      jest.spyOn(console, 'error');
+      global.console.error.mockImplementation(() => {});
+    });
+    afterEach(() => {
+      global.console.error.mockRestore();
+    });
     it('component receives props', () => {
       wrapper = mount(<Modal title={title} body={body} onClose={() => {}} />);
 
@@ -106,6 +152,13 @@ describe('<Modal />', () => {
       wrapper.setProps({ title: 'Changed modal title' });
       modalOpen(true, wrapper);
     });
+    it('throws an error when an invalid parentSelector prop is passed', () => {
+      wrapper = mount(<ErrorWrappedModal
+        {...defaultProps}
+        parentSelector="this-selector-does-not-exist"
+      />);
+      expect(wrapper.find('.error-occured')).toHaveLength(1);
+    });
   });
 
   describe('close functions properly', () => {
diff --git a/src/Modal/README.md b/src/Modal/README.md
index 1ffc23a5cc..f89dcaab77 100644
--- a/src/Modal/README.md
+++ b/src/Modal/README.md
@@ -24,3 +24,6 @@ Provides a basic modal component with customizable title, body, and footer butto
 
 ### `renderHeaderCloseButton` (boolean; optional)
 `renderHeaderCloseButton` specifies whether a close button is rendered in the modal header. It defaults to true.
+
+### `parentSelector` (string; optional)
+`parentSelector` is the selector for an element in the dom which the modal should be rendered under. It uses querySelector to find the first element that matches that selector, and then creates a react portal to a div underneath the parent element. 
diff --git a/src/Modal/index.jsx b/src/Modal/index.jsx
index 245429fbfa..eb0041080d 100644
--- a/src/Modal/index.jsx
+++ b/src/Modal/index.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
@@ -19,6 +20,7 @@ class Modal extends React.Component {
     this.setCloseButton = this.setCloseButton.bind(this);
 
     this.headerId = newId();
+    this.el = document.createElement('div');
 
     this.state = {
       open: props.open,
@@ -29,6 +31,11 @@ class Modal extends React.Component {
     if (this.firstFocusableElement) {
       this.firstFocusableElement.focus();
     }
+    this.parentElement = document.querySelector(this.props.parentSelector);
+    if (this.parentElement === null) {
+      throw new Error(`Modal recieved invalid parentSelector: ${this.props.parentSelector}, no matching element found`);
+    }
+    this.parentElement.appendChild(this.el);
   }
 
   componentWillReceiveProps({ open }) {
@@ -43,6 +50,10 @@ class Modal extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    ReactDOM.unmountComponentAtNode(this.parentElement);
+  }
+
   setFirstFocusableElement(input) {
     this.firstFocusableElement = input;
   }
@@ -146,68 +157,83 @@ class Modal extends React.Component {
     if (variant.status) {
       body = this.getVariantGridBody(body);
     }
-
     return body;
   }
 
-  render() {
+  renderModal() {
     const { open } = this.state;
     const { renderHeaderCloseButton } = this.props;
 
     return (
-      <div
-        className={classNames(
-          styles.modal,
-          {
-            [styles['modal-open']]: open,
+      <div>
+        <div
+          className={classNames({
             [styles['modal-backdrop']]: open,
             [styles.show]: open,
             [styles.fade]: !open,
-          },
-        )}
-        role="dialog"
-        aria-modal
-        aria-labelledby={this.headerId}
-        {...(!renderHeaderCloseButton ? { tabIndex: '-1' } : {})}
-        {...(!renderHeaderCloseButton ? { ref: this.setFirstFocusableElement } : {})}
-      >
-        <div className={styles['modal-dialog']}>
-          <div className={styles['modal-content']}>
-            <div className={styles['modal-header']}>
-              <h2 className={styles['modal-title']} id={this.headerId}>{this.props.title}</h2>
-              { renderHeaderCloseButton &&
+          })}
+        />
+        <div
+          className={classNames(
+            styles.modal,
+            {
+              [styles['d-block']]: open,
+              [styles.show]: open,
+              [styles.fade]: !open,
+            },
+          )}
+          role="dialog"
+          aria-modal
+          aria-labelledby={this.headerId}
+          {...(!renderHeaderCloseButton ? { tabIndex: '-1' } : {})}
+          {...(!renderHeaderCloseButton ? { ref: this.setFirstFocusableElement } : {})}
+        >
+          <div className={styles['modal-dialog']}>
+            <div className={styles['modal-content']}>
+              <div className={styles['modal-header']}>
+                <h2 className={styles['modal-title']} id={this.headerId}>{this.props.title}</h2>
+                { renderHeaderCloseButton &&
+                  <Button
+                    label={<Icon className={['fa', 'fa-times']} />}
+                    className={['p-1']}
+                    aria-label={this.props.closeText}
+                    onClick={this.close}
+                    inputRef={this.setFirstFocusableElement}
+                    onKeyDown={this.handleKeyDown}
+                  />
+                }
+              </div>
+              <div className={styles['modal-body']}>
+                {this.renderBody()}
+              </div>
+              <div className={styles['modal-footer']}>
+                {this.renderButtons()}
                 <Button
-                  label={<Icon className={['fa', 'fa-times']} />}
-                  className={['p-1']}
-                  aria-label={this.props.closeText}
+                  label={this.props.closeText}
+                  buttonType="secondary"
                   onClick={this.close}
-                  inputRef={this.setFirstFocusableElement}
+                  inputRef={this.setCloseButton}
                   onKeyDown={this.handleKeyDown}
                 />
-              }
-            </div>
-            <div className={styles['modal-body']}>
-              {this.renderBody()}
-            </div>
-            <div className={styles['modal-footer']}>
-              {this.renderButtons()}
-              <Button
-                label={this.props.closeText}
-                buttonType="outline-primary"
-                onClick={this.close}
-                inputRef={this.setCloseButton}
-                onKeyDown={this.handleKeyDown}
-              />
+              </div>
             </div>
           </div>
         </div>
       </div>
     );
   }
+
+  render() {
+    return ReactDOM.createPortal(
+      this.renderModal(),
+      this.el,
+    );
+  }
 }
 
 Modal.propTypes = {
   open: PropTypes.bool,
+  parentSelector: PropTypes.string,
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
   body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
   buttons: PropTypes.arrayOf(PropTypes.oneOfType([
@@ -224,6 +250,7 @@ Modal.propTypes = {
 
 Modal.defaultProps = {
   open: false,
+  parentSelector: 'body',
   buttons: [],
   closeText: 'Close',
   variant: {},