Stacked Modal Manager — Multiple Modals Layered Correctly, One Escape Press Per Layer

Most modal implementations assume exactly one modal is ever open at a time — a single boolean, a single overlay, a single Escape handler. The moment a real product needs to open a confirmation dialog *from inside* another modal (a common pattern: edit form → "are you sure you want to discard?"), that single-modal assumption breaks down. This snippet models modals as a genuine stack, where every operation is defined relative to "the top of the stack" rather than a single global open/closed flag.

Why a stack (array), not a counter or a boolean

stack holds the actual DOM overlay elements, in the order they were opened — not just a count of "how many modals are open." This distinction matters because closing needs to know *which specific modal* to remove (always the last one pushed, i.e. stack.pop()), and Escape handling needs to know *which one* to focus afterward. A simple counter could tell you "2 modals are open" but not which two, or in what order, or which one is currently on top and interactive — the array is what makes every subsequent operation correct.

Escape closes exactly one layer, never the whole stack

The keydown listener calls closeTopModal() — singular, one layer — every time Escape is pressed, rather than clearing the whole stack at once. This is a deliberate UX decision: if a user opened an edit form, then a nested "discard changes?" confirmation on top of it, hitting Escape once should dismiss just the confirmation (returning them to the edit form, still open) — not blow past it and close everything, which would risk discarding unsaved state the confirmation dialog existed specifically to protect.

Z-index stacking mirrors the array order automatically

Each overlay's z-index is set to 50 + depth, where depth increases by one for every nested modal — so the array order and the visual stacking order are always kept in lockstep by construction, not by a separate manually-maintained z-index counter that could drift out of sync with the actual stack array. Because each overlay also renders its own semi-transparent backdrop, layering three modals produces a naturally progressively-darker combined background with zero manual opacity math — each layer's own dimming simply compounds visually with the ones beneath it.

Focus always returns to the correct remaining layer, not a stale one

closeTopModal() doesn't just remove the top overlay — after popping it off the array, it calls topModal() again to find whatever is now the new top (which could be another modal, or nothing if the stack is now empty) and moves focus there. This guarantees that closing a triple-nested modal always leaves keyboard focus somewhere sensible and *current* — never on a reference to a modal that was itself already closed earlier, and never simply dropped onto the page body when a modal is technically still open beneath it.