Website Modal Windows and Popup Elements Design
Modal windows are used too often and in the wrong places. Before designing a modal, it's worth checking: can the same task be solved inline, on a separate page, or through a drawer? Modals block the entire interface — this is only justified when the user must make a decision or take action right now, without leaving the current context.
When Modal, When Not
Modal is appropriate for:
- Confirming destructive actions (delete, archive)
- Quick detail view without navigating to a page (lightbox, preview)
- Short form (2–4 fields: create tag, change email)
- Critical notification requiring action
Instead of modal, it's better to use:
- Inline editing — to change one field directly in the table
- Separate page — for long forms (more than 6–8 fields)
- Drawer (side panel) — for object details while preserving the list
- Popover / Dropdown — for choosing from a list, filters, menus
Modal Window Anatomy
Standard structure:
- Overlay — semi-transparent background (rgba(0,0,0,0.4–0.6)), blocks clicks, clicking on it closes modal
- Container — white (or bg-surface in dark mode), border-radius 8–16px, box-shadow
- Header — title + close button (×) in top right corner
- Body — content, with scroll on overflow
- Footer — action buttons (right-aligned): cancel + primary action
Container sizes:
- Small: 400px — confirmations, short notifications
- Medium: 560px — forms, details
- Large: 720–800px — preview, complex forms
- Fullscreen — always for mobile devices
Accessibility and Behavior
Modal windows require proper accessibility implementation:
- Focus trap: when opening, focus moves into modal, Tab cycles inside
- Esc closes modal
- When closing, focus returns to the element that opened the modal
-
aria-modal="true",role="dialog",aria-labelledbyto title
In design this means: close button should be the first or last focusable element (depends on convention), title is mandatory (even if visually hidden through sr-only).
Animation
Modal appears with animation — this reduces the "jump" and gives the user a moment to orient. Recommended parameters:
- Duration: 150–200ms for appearance, 100–150ms for hiding
- Overlay: fade in/out opacity
- Container: scale(0.95) → scale(1) + opacity 0 → 1
Longer than 250ms — modal feels slow. Shorter than 100ms — no point, transition is unnoticed.
Popup Elements: Popover, Dropdown, Tooltip
Unlike modal, these components don't block the interface and don't require explicit closing.
Dropdown — opens under/above trigger, contains list of actions or options. Closes by clicking outside the area or selecting an item.
Popover — more complex than tooltip. Can contain a form, list, confirmation. Positioned relative to trigger with flip logic (changes side if it doesn't fit in viewport).
For design, it's important to provide for all 4 positions (top, bottom, left, right) and their variations (start, center, end) — total 12 positioning variants. In Figma this is done through Variants with Auto Layout.
Timeline
Design of complete set of modal and popup components (three-size modal, drawer, popover, dropdown, confirmation dialog) — 3–5 days: pattern design, all variants and states, animation specifications, responsive design.