diff --git a/ts/modules/modal.ts b/ts/modules/modal.ts
index 398df93..95be1c1 100644
--- a/ts/modules/modal.ts
+++ b/ts/modules/modal.ts
@@ -3,8 +3,12 @@ declare var window: Window;
 export class Modal implements Modal {
     modal: HTMLElement;
     closeButton: HTMLSpanElement;
+    openEvent: CustomEvent;
+    closeEvent: CustomEvent;
     constructor(modal: HTMLElement, important: boolean = false) {
         this.modal = modal;
+        this.openEvent = new CustomEvent("modal-open-" + modal.id)
+        this.closeEvent = new CustomEvent("modal-close-" + modal.id)
         const closeButton = this.modal.querySelector('span.modal-close')
         if (closeButton !== null) {
             this.closeButton = closeButton as HTMLSpanElement;
@@ -26,11 +30,21 @@ export class Modal implements Modal {
             modal.classList.remove('modal-shown');
             modal.classList.remove('modal-hiding');
             modal.removeEventListener(window.animationEvent, listenerFunc);
+            document.dispatchEvent(this.closeEvent);
         };
         this.modal.addEventListener(window.animationEvent, listenerFunc, false);
     }
+
+    set onopen(f: () => void) {
+        document.addEventListener("modal-open-"+this.modal.id, f);
+    }
+    set onclose(f: () => void) {
+        document.addEventListener("modal-close-"+this.modal.id, f);
+    }
+
     show = () => {
         this.modal.classList.add('modal-shown');
+        document.dispatchEvent(this.openEvent);
     }
     toggle = () => {
         if (this.modal.classList.contains('modal-shown')) {