Skip to content
Snippets Groups Projects
Commit 9e444f48 authored by Planoetscher Daniel (Student Com20)'s avatar Planoetscher Daniel (Student Com20)
Browse files

deny scrolling within popup

parent bb47b805
No related branches found
No related tags found
No related merge requests found
......@@ -5,6 +5,7 @@ import { createPortal } from 'react-dom';
import './popup.scss';
const root = document.getElementById('root') ?? document.getElementsByTagName('html')[0];
const body = document.getElementsByTagName('html')[0];
interface Props {
children: ReactNode
......@@ -12,18 +13,23 @@ interface Props {
}
export default function Popup({ children, onClose }: Props) {
const onCloseModified = () => {
body.style.overflow = '';
onClose();
}
document.addEventListener('keydown', (e) => {
if (e.key === "Escape") {
onClose();
onCloseModified();
}
});
body.style.overflow = 'hidden';
return createPortal(
<div className="popup-container">
<div className="popup">
{children}
</div>
<div className="background" onClick={() => onClose()}></div>
<div className="background" onClick={() => onCloseModified()}></div>
</div>, root
)
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment