1 files changed, 28 insertions, 2 deletions
diff --git a/FrontEnd/src/views/common/dailog/Dialog.tsx b/FrontEnd/src/views/common/dailog/Dialog.tsx
index 5a3902c4..ee58080f 100644
--- a/FrontEnd/src/views/common/dailog/Dialog.tsx
+++ b/FrontEnd/src/views/common/dailog/Dialog.tsx
@@ -1,13 +1,39 @@
 import React from "react";
+import ReactDOM from "react-dom";
+
+import "./Dialog.css";
 
 export interface DialogProps {
   onClose: () => void;
   open?: boolean;
   children?: React.ReactNode;
+  disableCloseOnClickOnOverlay?: boolean;
 }
 
 export default function Dialog(props: DialogProps): React.ReactElement | null {
-  const { open, onClose, children } = props;
+  const { open, onClose, children, disableCloseOnClickOnOverlay } = props;
 
-  return <div>{children}</div>;
+  return open
+    ? ReactDOM.createPortal(
+        <div
+          className="cru-dialog-overlay"
+          onClick={
+            disableCloseOnClickOnOverlay
+              ? undefined
+              : () => {
+                  onClose();
+                }
+          }
+        >
+          <div
+            className="cru-dialog-container"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {children}
+          </div>
+        </div>,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        document.getElementById("portal")!
+      )
+    : null;
 }