Portals for Modals, Tooltips, and Overlays (Applied)

Learn the practical application of Portals to build correctly-layered, accessible modal and overlay components.

Building on the general Portal mechanism, real-world modal and overlay components need to combine createPortal with careful attention to focus management, keyboard interaction, and z-index/stacking, not just the physical DOM placement itself. A production-quality modal traps focus within itself while open (so Tab doesn't cycle focus to elements behind it), restores focus to whatever triggered it on close, and closes on Escape key press.

A well-built modal is like a temporary interview room set up mid-office (via Portal), but a good facilities team also makes sure the door locks properly while in use (focus trap), reopens automatically to the hallway once you leave (focus restoration), and has a clear exit sign and emergency release (Escape key and accessible labeling) — not just a room that happens to physically exist somewhere convenient.

Key Concepts

A typical implementation renders the portal's content into a dedicated DOM node reserved for overlays (often a <div id="portal-root"> sibling to the main app root in index.html), ensuring it sits outside the main app's stacking context entirely and can't be clipped by any ancestor's overflow: hidden. The overlay backdrop typically listens for clicks to close the modal, while the modal content itself stops that click from propagating so clicking inside doesn't unintentionally close it.

<div id="portal-root">index.htmloverflow: hidden

Accessibility attributes matter significantly here: role="dialog", aria-modal="true", and an accessible label (via aria-labelledby pointing at the modal's title) communicate to assistive technology that background content is temporarily inert and describe what the dialog is for — libraries like Radix UI or React Aria implement all of this correctly out of the box, which is why many teams prefer building on top of one rather than hand-rolling modal accessibility from scratch.

role="dialog"aria-modal="true"aria-labelledby

Interviewers ask candidates to identify everything a hand-rolled modal implementation needs beyond just createPortal itself — expecting a list covering focus trapping, focus restoration, Escape-to-close, backdrop click handling with propagation control, and the relevant ARIA attributes, since a portal alone only solves the DOM-placement half of the problem.

createPortal