diff --git a/packages/modal/README.md b/packages/modal/README.md
index e1710bcb0..1daa48008 100644
--- a/packages/modal/README.md
+++ b/packages/modal/README.md
@@ -23,7 +23,7 @@ Modals can be dismissed by:
 
 ### Do
 
-Disable primary actions until user can proceed
+Disable primary actions until user can proceed.
 Use `DangerButton` to indicate destructive actions.
 Focus on the first input field.
 Bind the return key to the primary action.
@@ -34,4 +34,5 @@ Use primary action labels that enforce what taking the action does.
 Display an error message at the bottom of the modal body.
 Center align text in the modal body.
 Have sidebars in modals (use the tabbed navigation).
-Use use labels that are ambiguous at first glance e.g. use “Delete user” instead of “Are you sure?" and “Delete”
+Use labels that are ambiguous at first glance e.g. use “Delete user” instead of “Are you sure?" and “Delete”.
+Put a dialog modal inside of a dialog modal.
diff --git a/packages/modal/components/ModalBase.tsx b/packages/modal/components/ModalBase.tsx
index 191b97345..d0f2eb0e9 100644
--- a/packages/modal/components/ModalBase.tsx
+++ b/packages/modal/components/ModalBase.tsx
@@ -38,6 +38,14 @@ export interface ModalBaseProps {
    * human-readable selector used for writing tests
    */
   dataCy?: string;
+  /**
+   * which DOM node the modal will attach to
+   */
+  overlayRoot?: HTMLElement;
+  /**
+   * the ID attribute that is passed to the modal dialog box
+   */
+  id?: string;
 }
 
 const animationDuration = 250;
@@ -63,11 +71,20 @@ class ModalBase extends React.PureComponent<ModalBaseProps, {}> {
   public onKeyDown(e) {
     if (e.key === "Escape") {
       this.props.onClose(e);
+      e.stopPropagation();
     }
   }
 
   public render() {
-    const { children, isAnimated, size, isOpen, dataCy } = this.props;
+    const {
+      children,
+      isAnimated,
+      size,
+      isOpen,
+      dataCy,
+      overlayRoot,
+      id
+    } = this.props;
     const modalSize = size || ModalSizes.M;
 
     return (
@@ -78,7 +95,7 @@ class ModalBase extends React.PureComponent<ModalBaseProps, {}> {
       >
         {state => {
           return (
-            <Overlay>
+            <Overlay overlayRoot={overlayRoot}>
               <FocusLock>
                 <div
                   role="button"
@@ -97,6 +114,7 @@ class ModalBase extends React.PureComponent<ModalBaseProps, {}> {
                   role="dialog"
                   onKeyDown={this.onKeyDown}
                   tabIndex={-1}
+                  id={id}
                 >
                   <ModalContents
                     isOpen={isOpen}
diff --git a/packages/modal/stories/Modal.stories.tsx b/packages/modal/stories/Modal.stories.tsx
index b6a3d7f87..0d3fe9dbd 100644
--- a/packages/modal/stories/Modal.stories.tsx
+++ b/packages/modal/stories/Modal.stories.tsx
@@ -325,6 +325,51 @@ storiesOf("Modal", module)
       }
     }
   )
+  .add(
+    "FullscreenModal w/ dialog modal",
+    () => {
+      return (
+        <ModalStoryContainer>
+          {({ isOpen, onClose }) => (
+            <FullscreenModal
+              isOpen={isOpen}
+              onClose={onClose}
+              title="I am modal"
+              subtitle="Optional subtitle"
+              closeText="Dismiss"
+              ctaButton={
+                <PrimaryButton
+                  onClick={action("handling CTA")}
+                  aria-haspopup={true}
+                >
+                  Continue
+                </PrimaryButton>
+              }
+              id="testId"
+            >
+              <ModalStoryContainer>
+                {({ isOpen, onClose }) => (
+                  <DialogModal
+                    isOpen={isOpen}
+                    onClose={onClose}
+                    title="I am modal"
+                    overlayRoot={document.querySelector("#testId")}
+                  >
+                    <ModalContent />
+                  </DialogModal>
+                )}
+              </ModalStoryContainer>
+            </FullscreenModal>
+          )}
+        </ModalStoryContainer>
+      );
+    },
+    {
+      info: {
+        propTables: [FullscreenModal]
+      }
+    }
+  )
   .add(
     "custom focused element",
     () => (