From 3eac852d1795ac485654306c6459841af5f5f95a Mon Sep 17 00:00:00 2001 From: Jing Hua Date: Sun, 5 Mar 2023 12:26:47 +0800 Subject: [PATCH] improve popupmodal --- index.html | 1 + src/components/PopupModal/PopupModal.tsx | 96 +++++++++++++----------- 2 files changed, 55 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index 3363c84..310772c 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,7 @@
+ diff --git a/src/components/PopupModal/PopupModal.tsx b/src/components/PopupModal/PopupModal.tsx index 8a17efa..25065ee 100644 --- a/src/components/PopupModal/PopupModal.tsx +++ b/src/components/PopupModal/PopupModal.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import ReactDOM from 'react-dom'; import CrossIcon2 from '@icon/CrossIcon2'; @@ -17,58 +18,69 @@ const PopupModal = ({ handleClose?: () => void; children?: React.ReactElement; }) => { + const modalRoot = document.getElementById('modal-root'); + const _handleClose = () => { handleClose && handleClose(); setIsModalOpen(false); }; - return ( -
-
-
-
-

- {title} -

- -
- - {message && ( -
-
- {message} -
+ if (modalRoot) { + return ReactDOM.createPortal( +
+
+
+
+

+ {title} +

+
- )} - {children} + {message && ( +
+
+ {message} +
+
+ )} -
- - + {children} + +
+ + +
-
-
- ); +
+
, + modalRoot + ); + } else { + return null; + } }; export default PopupModal;