Modals

Modal dialogs focus user attention on a specific task, form, or message without leaving the current page. This guide covers production-ready modal patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including confirmation dialogs, forms, alerts, slide-out panels, sizing, and accessibility.

A centered confirmation dialog with backdrop blur, close controls, and destructive action buttons. Click the trigger to open, then close via the backdrop, Escape key, or action buttons.

Modals are a common home for compact forms like sign-in, subscribe, or feedback. Keep labels visible, use clear validation, and close the modal only after a successful submission.

Status modals communicate the result of an action. Use an inline SVG icon, a concise message, and a single primary action to dismiss.

Slide-out panels enter from an edge and work well for detail views, settings, or shopping carts. Add a backdrop and close on Escape or backdrop click for a native feel.

Match the modal width to the content. Small modals work for confirmations, large modals for rich content like tables or media previews.

A semantic modal follows a predictable structure: backdrop overlay, dialog container with role="dialog", header with title and close button, content area, and footer with actions. Bind the title with aria-labelledby and return focus to the trigger on close.

Modals can easily trap or disorient keyboard and screen-reader users. Apply these patterns to keep dialogs usable for everyone.

• Use a real <button> for the trigger, not a div or link styled as a button.
• Add role="dialog" and aria-modal="true" so assistive tech identifies the boundary.
• Bind the title to the dialog with aria-labelledby, or use aria-label when no visible title exists.
• Trap focus inside the open modal — Tab should cycle through focusable modal elements only.
• Close on Escape key and backdrop click, but not when the user clicks inside the dialog.
• Return focus to the trigger element when the modal closes.
• Keep the modal title focusable or move focus to the first focusable control on open.
• Disable background page scrolling while a modal is open to prevent loss of context.

• Keep modals focused on a single task or message — avoid long scrolling content.
• Use a clearly labeled close control in the header and a primary action in the footer.
• Animate entrance with opacity and transform, keeping transitions brief (200-300ms).
• Avoid stacking multiple modals; use a queue or replace the current dialog instead.
• Test modals at 320px wide viewports to ensure content does not overflow.
• Reserve modals for decisions that block the current workflow; inline content is often better for non-blocking information.

Modal animations should guide attention without stealing it. The most effective pattern pairs a fading backdrop with a dialog that scales up slightly and slides in from above. Add subtle press and lift states to the trigger and close controls so the interaction feels tactile. Keep durations between 200ms and 300ms, use an easing curve that decelerates, and coordinate both entering and leaving states so the modal does not vanish instantly.