Modal

What is a Modal?

A modal is a dialog box that appears on top of the page content, dimming or blocking the background. Users must interact with the modal (complete an action or close it) before they can return to the main page.

Unlike popups, modals are typically triggered by user actions rather than appearing automatically.

Common Uses for Modals

• Login and signup forms - Keeping users on the current page
• Confirmation dialogs - "Are you sure you want to delete this?"
• Image lightboxes - Enlarging photos within the page
• Additional information - Details that don't need a new page
• Quick actions - Editing or adding items without navigation

Modal vs Popup

Aspect	Modal	Popup
Trigger	Usually user-initiated	Often automatic
Background	Blocked/dimmed	Page remains accessible
Purpose	Task completion	Marketing/notifications
User control	High (user requested it)	Low (appears unexpectedly)

Best Practices

• Include an obvious close button (X in the corner)
• Allow closing by clicking outside the modal
• Allow closing with the Escape key
• Keep content focused and concise
• Don't stack modals within modals
• Make sure the modal works on mobile

When Not to Use Modals

Modals interrupt the user's flow. Avoid them for:

• Content that could just be on the page
• Long forms that need scrolling
• Critical information users might miss
• Mobile experiences where modals feel cramped