diff --git a/framework/core/js/src/common/components/Modal.js b/framework/core/js/src/common/components/Modal.js
index b08f73b3a..97e3a273e 100644
--- a/framework/core/js/src/common/components/Modal.js
+++ b/framework/core/js/src/common/components/Modal.js
@@ -31,7 +31,7 @@ export default class Modal extends Component {
     // If the global modal state currently contains a modal,
     // we've just opened up a new one, and accordingly,
     // we don't need to show a hide animation.
-    if (!app.modal.modal) {
+    if (!this.attrs.state.modal) {
       this.attrs.onhide();
     }
   }
@@ -112,7 +112,7 @@ export default class Modal extends Component {
    * Hide the modal.
    */
   hide() {
-    app.modal.close();
+    this.attrs.state.close();
   }
 
   /**
diff --git a/framework/core/js/src/common/components/ModalManager.js b/framework/core/js/src/common/components/ModalManager.js
index 1b063552e..124eed226 100644
--- a/framework/core/js/src/common/components/ModalManager.js
+++ b/framework/core/js/src/common/components/ModalManager.js
@@ -11,7 +11,14 @@ export default class ModalManager extends Component {
 
     return (
       <div className="ModalManager modal fade">
-        {modal ? modal.componentClass.component({ ...modal.attrs, onshow: this.animateShow.bind(this), onhide: this.animateHide.bind(this) }) : ''}
+        {modal
+          ? modal.componentClass.component({
+              ...modal.attrs,
+              onshow: this.animateShow.bind(this),
+              onhide: this.animateHide.bind(this),
+              state: this.attrs.state,
+            })
+          : ''}
       </div>
     );
   }