feat added portal in dialog and made close button sticky

sadanandpai · Apr 2, 2024 · 4868243 · 4868243
1 parent 73ecbe5
commit 4868243
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
   <body>
     <div id="root"></div>
     <div id="screen-layout"></div>
+    <div id="modal"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/apps/path-finder/components/modal-icon/modals.module.scss b/src/apps/path-finder/components/modal-icon/modals.module.scss
@@ -40,9 +40,9 @@
 }
 
 .closeButton {
-  position: absolute;
-  top: 20px;
-  right: 20px;
+  position: sticky;
+  top: 0;
+  left: 97%;
   background: none;
   border: none;
   cursor: pointer;

diff --git a/src/apps/path-finder/components/modal-icon/modals.tsx b/src/apps/path-finder/components/modal-icon/modals.tsx
@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { Info, X } from 'lucide-react';
 import classes from './modals.module.scss';
-
+import { createPortal } from 'react-dom';
 interface Props {
   content: { id: number; heading: string; content: string }[];
 }
@@ -22,21 +22,23 @@ const Modals = ({ content }: Props) => {
       <button onClick={handleShowModal} className={classes.infoButton}>
         <Info size={20} />
       </button>
-
-      <dialog ref={dialogRef} className={classes.dialog}>
-        <button onClick={handleCloseModal} className={classes.closeButton}>
-          <X />
-        </button>
-
-        <div className={classes.body}>
-          {content.map((item) => (
-            <div key={item.id} className={classes.content}>
-              <h1 className={classes.contentHeading}>{item.heading}</h1>
-              <p className={classes.contentPara}>{item.content}</p>
-            </div>
-          ))}
-        </div>
-      </dialog>
+      {createPortal(
+        <dialog ref={dialogRef} className={classes.dialog}>
+          <button onClick={handleCloseModal} className={classes.closeButton}>
+            <X />
+          </button>
+
+          <div className={classes.body}>
+            {content.map((item) => (
+              <div key={item.id} className={classes.content}>
+                <h1 className={classes.contentHeading}>{item.heading}</h1>
+                <p className={classes.contentPara}>{item.content}</p>
+              </div>
+            ))}
+          </div>
+        </dialog>,
+        document.getElementById('modal')!
+      )}
     </>
   );
 };