Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Here is a working React modal you can adapt, plus the key choice behind it: render it inline when the surrounding layout allows, or use a portal when an ancestor clips or constrains the overlay. A portal only changes where the dialog appears in the DOM; it does not provide keyboard focus management or accessibility behavior.
Choose inline rendering or a portal
A modal can render in its ordinary place in the component tree. That is the simplest option when ancestor layout and stacking styles do not interfere. If a parent’s styles—such as overflow: hidden—clip the overlay, render the modal through a portal into an existing DOM node, often document.body or a dedicated overlay root.
As an Amazon Associate I earn from qualifying purchases.
React’s createPortal(children, domNode) changes the physical DOM placement while preserving the component’s place in the React tree. Context remains available, and events from portal content can still bubble to React ancestors. If an ancestor has a click handler, account for that behavior where needed. React: createPortal
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match| Approach | When it fits | What to check |
|---|---|---|
| Inline rendering | The surrounding layout does not clip or obscure the overlay. | Ancestor overflow and stacking styles. |
| Portal rendering | The dialog needs to escape a constrained ancestor. | The target DOM node exists when the portal renders; React event bubbling still follows the React tree. |
Neither approach supplies modal focus behavior or makes a dialog accessible by itself.
#1 Best Overall
A basic React modal component example
This rendering skeleton keeps open state in the owning component, mounts the modal only while open, names the dialog through its visible heading, and uses a portal to place it under document.body.
import { useState } from 'react';
import { createPortal } from 'react-dom';
function Modal({ onClose }) {
return createPortal(
<div className="backdrop" onMouseDown={onClose}>
<section
role="dialog"
aria-modal="true"
aria-labelledby="example-modal-title"
onMouseDown={event => event.stopPropagation()}
>
<h2 id="example-modal-title">Example dialog</h2>
<p>Dialog content goes here.</p>
<button type="button" onClick={onClose}>Close</button>
</section>
</div>,
document.body
);
}
export default function App() {
const [open, setOpen] = useState(false);
return (
<>
<button type="button" onClick={() => setOpen(true)}>Open dialog</button>
{open && <Modal onClose={() => setOpen(false)} />}
</>
);
}The example stops a mouse-down inside the dialog from reaching the backdrop handler. For a real interface, decide deliberately whether clicking the backdrop dismisses the dialog; if it does, distinguish a backdrop click from interaction with dialog content. The skeleton does not implement keyboard focus management or other production modal behavior.
Complete the modal’s keyboard and assistive-technology behavior
A modal dialog creates a separate interaction context while it is open. The WAI-ARIA Authoring Practices describe the expected pattern: move focus into the dialog, keep keyboard navigation within it, support Escape dismissal where appropriate, and return focus to the control that opened it when it closes. Follow the pattern for focus placement and Tab sequence rather than assuming the portal or dialog role handles them. WAI-ARIA Authoring Practices: Dialog (Modal) Pattern
Recommended Free Tools
- Name the dialog: connect its visible heading with
aria-labelledby, as in the example. - Set modal semantics truthfully: use
aria-modal="true"when the background is unavailable for interaction. This communicates that state to assistive technology; it does not itself disable or hide background controls. - Manage focus: move focus into the dialog on open, contain Tab and Shift+Tab navigation while it is modal, and restore focus to the opener on close.
- Handle dismissal: support Escape when appropriate and ensure the close button works with keyboard and pointer input.
- Keep the dialog exposed: do not apply
aria-hiddento an ancestor that also contains the dialog. The dialog must remain available to assistive technology. W3C WAI: Modal Dialog Example
Also consider scroll locking and coordination if dialogs can be stacked. The short example does not implement those behaviors, nor is it a complete focus-management implementation. Test keyboard interaction and assistive-technology behavior in the environments your application supports.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What a portal does—and does not do
Use a portal to solve a DOM-placement problem, such as clipping by an ancestor. It does not trap focus, provide a dialog’s accessible name, or prevent interaction with the background. Those responsibilities belong to the modal’s semantics and interaction logic. React’s portal documentation also notes that focus management may be necessary. React: createPortal
Because portal events still bubble through the React tree, a click inside a modal can reach a React ancestor’s handler even though the portal’s DOM node is elsewhere. Stop propagation or adjust the ancestor handler if that behavior is inappropriate.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →
