Live Interactive Demo Model
Accessible Modal Dialog System
A reusable modal dialog with support for confirm prompts, forms, and danger alert sheets.
Modal Trigger Sandbox
Click any button below to launch a modal. Test closing via the ✕ button, clicking outside on the backdrop, or pressing the ESC key.
Acceptance Criteria
Managing open/close dialog state and locking document.body scrolling
Listening for global keydown Escape events with cleanup
Distinguishing backdrop clicks from content clicks using event propagation
Target APIs & Concepts
ESC Key ListenerClick-Outside BackdropBody Scroll Lock
Ready to code this yourself? Switch to the Candidate Code Studio to write your implementation in React 19 and run automated test evaluations!