A modal is one of the most common uses of [React](/courses/reactjs) Portals because it should usually appear above the [rest](/courses/expressjs) of the page and should not be constrained by the layout of the component that opened it. A useful modal needs more than just `position: fixed`. It should also consider focus, keyboard interaction, backdrop behavior, and accessibility. ### Basic Portal Modal ```jsx import { createPortal } from "react-dom"; function Modal({ open, onClose, children }) { if (!open) { return null; } return createPortal(

, document.body ); } ``` Usage: ```jsx function Page() { const [open, setOpen] = useState(false); return ( <> setOpen(false)} >

Edit Profile

); } ``` ### Why Render to document.body? A modal often needs to escape containers with: ```text overflow: hidden transform stacking contexts positioning constraints ``` Rendering near the document root simplifies overlay positioning. ### Close on Escape ```jsx useEffect(() => { if (!open) return; function handleKeyDown(event) { if (event.key === "Escape") { onClose(); } } window.addEventListener("keydown", handleKeyDown); return () => { window.removeEventListener("keydown", handleKeyDown); }; }, [open, onClose]); ``` ### Close When Backdrop Is Clicked ```jsx function handleBackdropClick(event) { if (event.target === event.currentTarget) { onClose(); } } ``` Then: ```jsx

``` This avoids closing when the user clicks inside the modal content. ### Focus Management When a modal opens, keyboard focus should generally move inside it. ```jsx const closeButtonRef = useRef(null); useEffect(() => { if (open) { closeButtonRef.current?.focus(); } }, [open]); ``` The close button can use: ```jsx ``` A production modal should usually also trap focus inside the dialog and restore focus to the element that opened it when the modal closes. ### Prevent Background Scrolling For many modals, background page scrolling should be disabled while the modal is open. ```jsx useEffect(() => { if (!open) return; const previous = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = previous; }; }, [open]); ``` ### Add an Accessible Name A dialog should have an accessible label. For example: ```jsx

Edit Profile

``` and: ```jsx