What makes a dialog modal?

A modal dialog makes the rest of the page unavailable while it is open. The top dialog owns interaction, background content is inert, focus moves into the dialog, and focus returns to a sensible target when it closes. A backdrop alone does not create modality.

Should every dialog trap focus?

Only modal dialogs should contain tab navigation. A non-modal dialog lets the user interact elsewhere. Choose the semantic behavior first, then implement geometry and styling around it.

How should nested dialogs work?

Keep an explicit stack. Only the top entry is interactive and dismissible. Each entry records its opener or restoration target, scroll-lock contribution, and cleanup work. Closing the top dialog restores focus within the dialog below.

Should clicking the backdrop always close a modal?

No. Backdrop dismissal is a product policy. Destructive, legal, authentication, and long-form dialogs may require an explicit action. If backdrop dismissal is enabled, treat pointer down and up carefully so dragging from inside does not close the dialog.

Is the native dialog element enough?

The native dialog element supplies useful top-layer, focus, and inert behavior when opened with showModal. A production platform still needs product policy, nested ownership, restoration, animation, routing, testing, and fallbacks for its support matrix.

Where should focus go after a modal closes?

Usually return it to the element that opened that modal. If the opener was removed or disabled, use an explicit fallback near the original task. For nested dialogs, closing the top one should restore focus inside the dialog beneath it.

FSD-006Frontend system design Premium

Design an Accessible Modal and Nested-Dialog Manager

Design a modal platform with correct top-layer ownership, inert background content, focus containment, nested dialogs, and reliable restoration.

23 August 2026Intermediate 40 min read

A modal manager is a stack of interaction owners, not a collection of high z-index values. Only the top dialog accepts input. The rest of the page is inert, focus stays within the top dialog, Escape follows product policy, and every close operation restores focus and global effects exactly once.

A centered panel and dark backdrop can still be an inaccessible overlay. The platform has to coordinate focus, keyboard dismissal, pointer dismissal, scroll locking, nested layers, routes, animations, and cleanup.

The design becomes manageable when one stack owns those cross-cutting effects.

Start with interaction ownership

Each open modal contributes one stack record:

stable dialog ID;
opener or explicit focus-return target;
initial focus policy;
Escape and backdrop dismissal policy;
scroll-lock and inertness contribution;
lifecycle phase and cleanup handles.

Only the top record is active. A nested confirmation sits above its parent editor. Closing the confirmation restores focus to the parent, not to the page behind both dialogs.

The public interview prompt

Design a reusable modal and nested-dialog manager for a frontend platform. Explain:

dialog identity, stack ownership, lifecycle phases, and controlled APIs;
portal placement, the browser top layer, stacking contexts, inertness, and scroll locking;
initial focus, tab containment, Escape, backdrop dismissal, and focus restoration;
nested dialogs, async actions, route changes, errors, animation, and cleanup;
keyboard, screen-reader, pointer, touch, zoom, and mobile behavior;
security, observability, testing, rollout, and evolution.

Assume product teams can supply arbitrary dialog content. Version one supports modal dialogs and nested confirmations, not movable windows, non-modal palettes, or cross-tab coordination.

What the premium solution covers

The complete solution defines stack records, a reducer, native-dialog and portal adapters, top-layer behavior, inertness, focus and dismissal contracts, nested restoration, scroll-lock reference counting, transition phases, async and navigation failures, mobile sheets, accessibility details, security boundaries, telemetry, deterministic tests, rollout gates, and an interview scoring rubric.

Original media shows how top-layer ownership moves through a nested stack and how restoration targets form a ledger. A deterministic lab lets you open and close nested layers while inspecting which surface owns focus and where it returns.

Premium solution

Continue with the complete system design

Unlock the architecture, state machine, API contracts, original diagrams, positioning model, accessibility decisions, performance budgets, testing plan, rollout strategy, scoring rubric, and interview walkthrough.

Detailed, beginner-friendly explanation
Production failure modes and trade-offs
Mobile-friendly architecture diagrams
Senior and staff-level interview signals

Unlock Premium

Frequently asked questions

What makes a dialog modal?: A modal dialog makes the rest of the page unavailable while it is open. The top dialog owns interaction, background content is inert, focus moves into the dialog, and focus returns to a sensible target when it closes. A backdrop alone does not create modality.
Should every dialog trap focus?: Only modal dialogs should contain tab navigation. A non-modal dialog lets the user interact elsewhere. Choose the semantic behavior first, then implement geometry and styling around it.
How should nested dialogs work?: Keep an explicit stack. Only the top entry is interactive and dismissible. Each entry records its opener or restoration target, scroll-lock contribution, and cleanup work. Closing the top dialog restores focus within the dialog below.
Should clicking the backdrop always close a modal?: No. Backdrop dismissal is a product policy. Destructive, legal, authentication, and long-form dialogs may require an explicit action. If backdrop dismissal is enabled, treat pointer down and up carefully so dragging from inside does not close the dialog.
Is the native dialog element enough?: The native dialog element supplies useful top-layer, focus, and inert behavior when opened with showModal. A production platform still needs product policy, nested ownership, restoration, animation, routing, testing, and fallbacks for its support matrix.
Where should focus go after a modal closes?: Usually return it to the element that opened that modal. If the opener was removed or disabled, use an explicit fallback near the original task. For nested dialogs, closing the top one should restore focus inside the dialog beneath it.