alex/nova-betterchat
1
0
Fork 0
mirror of https://github.com/NovaOSS/nova-betterchat.git synced 2024-11-25 22:23:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve popupmodal

Browse source
This commit is contained in:
Jing Hua 2023-03-05 12:26:47 +08:00
parent 990a83fea8
commit 3eac852d17
2 changed files with 55 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -23,6 +23,7 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<div id="modal-root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

20
src/components/PopupModal/PopupModal.tsx
View file

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom';
import CrossIcon2 from '@icon/CrossIcon2'; import CrossIcon2 from '@icon/CrossIcon2';
@ -17,14 +18,17 @@ const PopupModal = ({
handleClose?: () => void; handleClose?: () => void;
children?: React.ReactElement; children?: React.ReactElement;
}) => { }) => {
const modalRoot = document.getElementById('modal-root');
const _handleClose = () => { const _handleClose = () => {
handleClose && handleClose(); handleClose && handleClose();
setIsModalOpen(false); setIsModalOpen(false);
}; };
return ( if (modalRoot) {
<div className='fixed top-0 left-0 z-[999] w-full p-4 overflow-x-hidden overflow-y-auto h-full flex justify-center items-center bg-gray-800/90'> return ReactDOM.createPortal(
<div className='relative w-full h-full max-w-2xl md:h-auto'> <div className='fixed top-0 left-0 z-[999] w-full p-4 overflow-x-hidden overflow-y-auto h-full flex justify-center items-center'>
<div className='relative z-2 max-w-2xl md:h-auto flex justify-center items-center'>
<div className='relative bg-white rounded-lg shadow dark:bg-gray-700'> <div className='relative bg-white rounded-lg shadow dark:bg-gray-700'>
<div className='flex items-center justify-between p-4 border-b rounded-t dark:border-gray-600'> <div className='flex items-center justify-between p-4 border-b rounded-t dark:border-gray-600'>
<h3 className='ml-2 text-lg font-semibold text-gray-900 dark:text-white'> <h3 className='ml-2 text-lg font-semibold text-gray-900 dark:text-white'>
@ -67,8 +71,16 @@ const PopupModal = ({
</div> </div>
</div> </div>
</div> </div>
</div> <div
className='bg-gray-800/90 absolute top-0 left-0 h-full w-full z-[-1]'
onClick={_handleClose}
/>
</div>,
modalRoot
); );
} else {
return null;
}
}; };
export default PopupModal; export default PopupModal;