diff --git a/frontend/src/ts/elements/alerts.ts b/frontend/src/ts/elements/alerts.ts
index a6b7be5ca2ed..0e98da2fe6e2 100644
--- a/frontend/src/ts/elements/alerts.ts
+++ b/frontend/src/ts/elements/alerts.ts
@@ -422,27 +422,36 @@ NotificationEvent.subscribe((message, level, customTitle) => {
   }
 });
 
-const modal = new AnimatedModal("alertsPopup", {
-  show: {
-    modal: {
-      from: {
-        marginRight: "-10rem",
+const modal = new AnimatedModal(
+  "alertsPopup",
+  {
+    show: {
+      modal: {
+        from: {
+          marginRight: "-10rem",
+        },
+        to: {
+          marginRight: "0",
+        },
+        easing: "easeOutCirc",
       },
-      to: {
-        marginRight: "0",
-      },
-      easing: "easeOutCirc",
     },
-  },
-  hide: {
-    modal: {
-      from: {
-        marginRight: "0",
+    hide: {
+      modal: {
+        from: {
+          marginRight: "0",
+        },
+        to: {
+          marginRight: "-10rem",
+        },
+        easing: "easeInCirc",
       },
-      to: {
-        marginRight: "-10rem",
-      },
-      easing: "easeInCirc",
     },
   },
-});
+  () => {
+    hide();
+  },
+  () => {
+    hide();
+  }
+);
diff --git a/frontend/src/ts/popups/animated-modal.ts b/frontend/src/ts/popups/animated-modal.ts
index d86263cf91c8..1feef7b31657 100644
--- a/frontend/src/ts/popups/animated-modal.ts
+++ b/frontend/src/ts/popups/animated-modal.ts
@@ -37,7 +37,9 @@ export default class AnimatedModal {
 
   constructor(
     wrapperId: string,
-    customAnimations?: ConstructorCustomAnimations
+    customAnimations?: ConstructorCustomAnimations,
+    customEscapeHandler?: (e: KeyboardEvent) => void,
+    customWrapperClickHandler?: (e: MouseEvent) => void
   ) {
     if (wrapperId.startsWith("#")) {
       wrapperId = wrapperId.slice(1);
@@ -74,13 +76,21 @@ export default class AnimatedModal {
 
     this.wrapperEl.addEventListener("keydown", (e) => {
       if (e.key === "Escape" && isPopupVisible(this.wrapperId)) {
-        void this.hide();
+        if (customEscapeHandler) {
+          customEscapeHandler(e);
+        } else {
+          void this.hide();
+        }
       }
     });
 
     this.wrapperEl.addEventListener("mousedown", (e) => {
       if (e.target === this.wrapperEl) {
-        void this.hide();
+        if (customWrapperClickHandler) {
+          customWrapperClickHandler(e);
+        } else {
+          void this.hide();
+        }
       }
     });