popup now all can be dismissed by clicking outside the window and have grey background

css/popupboxes.scss

@@ -23,6 +23,7 @@
     width: 70%;
     max-height: 80%;
     overflow-y: auto;
+    z-index: 11; /* Sit on top of the container */
     color: var(--my-font-color);
 }
 

dist/engineStyle.css

@@ -1552,6 +1552,8 @@ button {
   width: 70%;
   max-height: 80%;
   overflow-y: auto;
+  z-index: 11;
+  /* Sit on top of the container */
   color: var(--my-font-color); }
 
 .popup-box-button,

src/ui/React/createPopup.tsx

@@ -33,12 +33,17 @@ export function createPopup<T>(id: string, rootComponent: (props: T) => React.Re
     let container = document.getElementById(id);
     if (container == null) {
         function onClick(this: HTMLElement, event: MouseEvent): any {
-            //console.log(this.id);
+            if(!event.srcElement) return;
+            if(!(event.srcElement instanceof HTMLElement)) return;
+            const clickedId = (event.srcElement as HTMLElement).id;
+            if(clickedId !== id) return;
+            removePopup(id);
         }
         container = createElement("div", {
             class: "popup-box-container",
             display: "flex",
             id: id,
+            backgroundColor: 'rgba(0,0,0,0.5)',
             clickListener: onClick,
         });