Component Deep Dive #16: Modal Dialog — The Web's Most Abused Component

Modal Dialog — The Web's Most Abused Component

The Hook

Three seconds after landing on a page, a newsletter popup appears. You close it. Two scrolls later, a "limited offer" popup. You close the tab. The modal is the highest-converting and most-hated UI pattern — the difference is entirely in how you use it.

Core Implementation

A proper modal: locks background scroll, traps keyboard focus, closes on ESC, and restores focus to the triggering element on close. The focus trap is critical — without it, keyboard users tab right into the background page.

if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }

Common Mistakes

• Forgetting aria-modal="true" lets screen readers escape to background content
• Not restoring body overflow on close permanently breaks scrolling
• Nested modals require a stack-based focus management approach

👉 Live demo: wdsega.github.io/web-components | ¥9.99: payhip.com/b/S9pj2