From 4868243d54bfdfe100eab00542b7517b07d9defb Mon Sep 17 00:00:00 2001 From: Mohdsaifulla Date: Tue, 2 Apr 2024 16:28:59 +0530 Subject: [PATCH] feat added portal in dialog and made close button sticky --- index.html | 1 + .../components/modal-icon/modals.module.scss | 6 ++-- .../components/modal-icon/modals.tsx | 34 ++++++++++--------- 3 files changed, 22 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index cfe9469..ee2910b 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@
+ diff --git a/src/apps/path-finder/components/modal-icon/modals.module.scss b/src/apps/path-finder/components/modal-icon/modals.module.scss index c22fcaf..2b078cb 100644 --- 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 index 6e2a5f8..ed350ff 100644 --- 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) => { - - - - -
- {content.map((item) => ( -
-

{item.heading}

-

{item.content}

-
- ))} -
- + {createPortal( + + + +
+ {content.map((item) => ( +
+

{item.heading}

+

{item.content}

+
+ ))} +
+ , + document.getElementById('modal')! + )} ); };