Frontend System Design
/Advanced
Design Modal
Definition
A robust Modal requires React Portals to escape `overflow: hidden` containers, Focus Trapping (so keyboard users can't tab outside the modal), escaping via the `Esc` key, and preventing background body scrolling.
Explain Like I'm New
A popup window that forces you to interact with it. Building a good one is surprisingly difficult because you have to trap the user's keyboard focus inside it.
Architecture & Flow
Interview Questions
basic
- What are the core requirements for Modal Component?
intermediate
- How do you handle edge cases and accessibility in Modal Component?
advanced
- How do you scale and optimize Modal Component for millions of concurrent users?
trick
- What happens to Modal Component if JavaScript is disabled?