diff --git a/web/src/elements/Interface/Interface.ts b/web/src/elements/Interface/Interface.ts
index 8da9454603..8bedbe16e7 100644
--- a/web/src/elements/Interface/Interface.ts
+++ b/web/src/elements/Interface/Interface.ts
@@ -1,4 +1,5 @@
 import { UIConfig, uiConfig } from "@goauthentik/common/ui/config";
+import { ModalOrchestrationController } from "@goauthentik/elements/controllers/ModalOrchestrationController.js";
 import { ensureCSSStyleSheet } from "@goauthentik/elements/utils/ensureCSSStyleSheet";
 
 import { state } from "lit/decorators.js";
@@ -22,6 +23,7 @@ export type AkInterface = HTMLElement & {
 
 const brandContext = Symbol("brandContext");
 const configContext = Symbol("configContext");
+const modalController = Symbol("modalController");
 
 export class Interface extends AKElement implements AkInterface {
     @state()
@@ -31,6 +33,8 @@ export class Interface extends AKElement implements AkInterface {
 
     [configContext]!: ConfigContextController;
 
+    [modalController]!: ModalOrchestrationController;
+
     @state()
     config?: Config;
 
@@ -42,6 +46,7 @@ export class Interface extends AKElement implements AkInterface {
         document.adoptedStyleSheets = [...document.adoptedStyleSheets, ensureCSSStyleSheet(PFBase)];
         this[brandContext] = new BrandContextController(this);
         this[configContext] = new ConfigContextController(this);
+        this[modalController] = new ModalOrchestrationController(this);
         this.dataset.akInterfaceRoot = "true";
     }
 
diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts
index 5e43b5a455..1fb4a059af 100644
--- a/web/src/elements/buttons/ModalButton.ts
+++ b/web/src/elements/buttons/ModalButton.ts
@@ -1,5 +1,9 @@
 import { PFSize } from "@goauthentik/common/enums.js";
 import { AKElement } from "@goauthentik/elements/Base";
+import {
+    ModalHideEvent,
+    ModalShowEvent,
+} from "@goauthentik/elements/controllers/ModalOrchestrationController.js";
 
 import { CSSResult, TemplateResult, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -65,22 +69,9 @@ export class ModalButton extends AKElement {
         ];
     }
 
-    firstUpdated(): void {
-        if (this.handlerBound) return;
-        window.addEventListener("keyup", this.keyUpHandler);
-        this.handlerBound = true;
-    }
-
-    keyUpHandler = (e: KeyboardEvent): void => {
-        if (e.code === "Escape") {
-            this.resetForms();
-            this.open = false;
-        }
-    };
-
-    disconnectedCallback(): void {
-        super.disconnectedCallback();
-        window.removeEventListener("keyup", this.keyUpHandler);
+    closeModal() {
+        this.resetForms();
+        this.open = false;
     }
 
     resetForms(): void {
@@ -93,6 +84,7 @@ export class ModalButton extends AKElement {
 
     onClick(): void {
         this.open = true;
+        this.dispatchEvent(new ModalShowEvent(this));
         this.querySelectorAll("*").forEach((child) => {
             if ("requestUpdate" in child) {
                 (child as AKElement).requestUpdate();
@@ -119,8 +111,7 @@ export class ModalButton extends AKElement {
                 >
                     <button
                         @click=${() => {
-                            this.resetForms();
-                            this.open = false;
+                            this.dispatchEvent(new ModalHideEvent(this));
                         }}
                         class="pf-c-button pf-m-plain"
                         type="button"
diff --git a/web/src/elements/controllers/ModalOrchestrationController.ts b/web/src/elements/controllers/ModalOrchestrationController.ts
new file mode 100644
index 0000000000..3119ee95cb
--- /dev/null
+++ b/web/src/elements/controllers/ModalOrchestrationController.ts
@@ -0,0 +1,122 @@
+import { bound } from "@goauthentik/elements/decorators/bound.js";
+
+import { LitElement, ReactiveController, ReactiveControllerHost } from "lit";
+
+type ReactiveElementHost = Partial<ReactiveControllerHost> & LitElement;
+
+type ModalElement = LitElement & { closeModal(): void | boolean };
+
+export class ModalShowEvent extends Event {
+    modal: ModalElement;
+    constructor(modal: ModalElement) {
+        super("ak-modal-show", { bubbles: true, composed: true });
+        this.modal = modal;
+    }
+}
+
+export class ModalHideEvent extends Event {
+    modal: ModalElement;
+    constructor(modal: ModalElement) {
+        super("ak-modal-hide", { bubbles: true, composed: true });
+        this.modal = modal;
+    }
+}
+
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "ak-modal-show": ModalShowEvent;
+        "ak-modal-hide": ModalHideEvent;
+    }
+}
+
+const modalIsLive = (modal: ModalElement) => modal.isConnected && modal.checkVisibility();
+
+/**
+ * class ModalOrchetrationController
+ *
+ * A top-level controller that listens for requests from modals to be added to
+ * the management list, such that the *topmost* modal will be closed (and all
+ * references to it eliminated) whenever the user presses the Escape key.
+ * Can also take ModalHideEvent requests and automatically close the modal
+ * sending the event.
+ *
+ * Both events that this responds to expect a reference to the modal to be part
+ * of the event payload.
+ *
+ * If the `.closeModal()` method on the target modal returns `false`
+ * *explicitly*, it will abort cleanup and the stack will keep the record that
+ * the modal is still open. This allows `.closeModal()` to return `undefined`
+ * and still behave correctly.
+ */
+
+export class ModalOrchestrationController implements ReactiveController {
+    host!: ReactiveElementHost;
+
+    knownModals: ModalElement[] = [];
+
+    constructor(host: ReactiveElementHost) {
+        this.host = host;
+        host.addController(this);
+    }
+
+    hostConnected() {
+        window.addEventListener("keyup", this.handleKeyup);
+        window.addEventListener("ak-modal-show", this.addModal);
+        window.addEventListener("ak-modal-hide", this.closeModal);
+    }
+
+    hostDisconnected() {
+        window.removeEventListener("keyup", this.handleKeyup);
+        window.removeEventListener("ak-modal-show", this.addModal);
+        window.removeEventListener("ak-modal-hide", this.closeModal);
+    }
+
+    @bound
+    addModal(e: ModalShowEvent) {
+        this.knownModals = [...this.knownModals, e.modal];
+    }
+
+    scheduleCleanup(modal: ModalElement) {
+        setTimeout(() => {
+            this.knownModals = this.knownModals.filter((m) => modalIsLive(m) && modal !== m);
+        }, 0);
+    }
+
+    @bound
+    closeModal(e: ModalHideEvent) {
+        const modal = e.modal;
+        if (!modalIsLive(modal)) {
+            return;
+        }
+        if (modal.closeModal() !== false) {
+            this.scheduleCleanup(modal);
+        }
+    }
+
+    removeTopmostModal() {
+        let checking = true;
+        while (checking) {
+            const modal = this.knownModals.pop();
+            if (!modal) {
+                break;
+            }
+            if (!modalIsLive(modal)) {
+                continue;
+            }
+
+            if (modal.closeModal() !== false) {
+                this.scheduleCleanup(modal);
+            }
+            checking = false;
+            break;
+        }
+    }
+
+    @bound
+    handleKeyup(e: KeyboardEvent) {
+        // The latter handles Firefox 37 and earlier.
+        if (e.key === "Escape" || e.key === "Esc") {
+            this.removeTopmostModal();
+        }
+    }
+}
diff --git a/web/src/elements/decorators/bound.ts b/web/src/elements/decorators/bound.ts
new file mode 100644
index 0000000000..52adbee68b
--- /dev/null
+++ b/web/src/elements/decorators/bound.ts
@@ -0,0 +1,31 @@
+// Automatically binds a method to the `this` instance during instantiation.
+// Uses the Typescript Experimental Decorator syntax, so we may be living with
+// that for a long time.
+
+// MDN is *not* very helpful. The type for a PropertyDescriptor is kept in
+// typescript/lib/lib.es5.d.ts, but the description of what everything in
+// a descriptor does isn't specified in MDN in its own page, only in
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+
+// This decorator feels awkward. It gets a new instance of the method every time
+// you reference the field. I wonder if there would be a way to create a lookup
+// table; once you'd bound the method you could reuse that bound method for that
+// instance, instead of throwing it away?
+
+export function bound(
+    target: unknown,
+    key: string,
+    descriptor: PropertyDescriptor,
+): PropertyDescriptor {
+    if (typeof descriptor?.value !== "function") {
+        throw new Error("Only methods can be @bound.");
+    }
+    return {
+        configurable: true,
+        get() {
+            const method = descriptor.value.bind(this);
+            Object.defineProperty(this, key, { value: method, configurable: true, writable: true });
+            return method;
+        },
+    };
+}
diff --git a/web/src/elements/forms/ModalForm.ts b/web/src/elements/forms/ModalForm.ts
index 6f058ce33d..e107729abd 100644
--- a/web/src/elements/forms/ModalForm.ts
+++ b/web/src/elements/forms/ModalForm.ts
@@ -2,6 +2,7 @@ import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import "@goauthentik/elements/LoadingOverlay";
 import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
 import "@goauthentik/elements/buttons/SpinnerButton";
+import { ModalHideEvent } from "@goauthentik/elements/controllers/ModalOrchestrationController.js";
 import { Form } from "@goauthentik/elements/forms/Form";
 
 import { msg } from "@lit/localize";
@@ -92,8 +93,7 @@ export class ModalForm extends ModalButton {
                     : html``}
                 <ak-spinner-button
                     .callAction=${async () => {
-                        this.resetForms();
-                        this.open = false;
+                        this.dispatchEvent(new ModalHideEvent(this));
                     }}
                     class="pf-m-secondary"
                 >
diff --git a/web/src/elements/table/TableModal.ts b/web/src/elements/table/TableModal.ts
index 98f94a2d2f..50311d8aef 100644
--- a/web/src/elements/table/TableModal.ts
+++ b/web/src/elements/table/TableModal.ts
@@ -1,6 +1,7 @@
 import { PFSize } from "@goauthentik/common/enums.js";
 import { AKElement } from "@goauthentik/elements/Base";
 import { MODAL_BUTTON_STYLES } from "@goauthentik/elements/buttons/ModalButton";
+import { ModalShowEvent } from "@goauthentik/elements/controllers/ModalOrchestrationController.js";
 import { Table } from "@goauthentik/elements/table/Table";
 
 import { CSSResult } from "lit";
@@ -44,16 +45,6 @@ export abstract class TableModal<T> extends Table<T> {
         );
     }
 
-    constructor() {
-        super();
-        window.addEventListener("keyup", (e) => {
-            if (e.code === "Escape") {
-                this.resetForms();
-                this.open = false;
-            }
-        });
-    }
-
     public async fetch(): Promise<void> {
         if (!this.open) {
             return;
@@ -61,6 +52,11 @@ export abstract class TableModal<T> extends Table<T> {
         return super.fetch();
     }
 
+    closeModal() {
+        this.resetForms();
+        this.open = false;
+    }
+
     resetForms(): void {
         this.querySelectorAll<HTMLFormElement>("[slot=form]").forEach((form) => {
             if ("resetForm" in form) {
@@ -71,6 +67,7 @@ export abstract class TableModal<T> extends Table<T> {
 
     onClick(): void {
         this.open = true;
+        this.dispatchEvent(new ModalShowEvent(this));
         this.querySelectorAll("*").forEach((child) => {
             if ("requestUpdate" in child) {
                 (child as AKElement).requestUpdate();