Modal
You might say
Click the button to show a dialog in the middle of the screen and dim the background.
Pause the page for one focused decision or taskA modal appears above the page when the user must review or complete a focused task before continuing. It needs a clear title, a safe way to close, sensible keyboard focus, and buttons that state the result. Long or complex work is usually better on its own page.
Also calledDialog
Anatomy
Delete this item?CancelConfirm deletion
Translucency covers the page and can usually be closed by clicking on it
Floats above the mask, making the rest of the page unclickable
Clearly state the decisions that need to be made
Explain consequences or host short forms to control content length
The main button explains the results clearly, and dangerous actions use text and visual reminders of risks.
Variants
Confirm
Confirm deletion?
CancelConfirm deletion
Dangerous operations require explicit confirmation from the user before continuing.
Form
Rename project
Website refresh v2
CancelSave
Complete short forms such as renaming and creating new ones on the spot
Preview
Cover preview
Close
Zoom in to see pictures or details, then close when finished
Typical use cases
Delete confirmation
Delete this item?
"Website refresh v2" and its 12 files will be permanently deleted and cannot be restored.
Create folder
Rename project
Invite member
Cover preview
Choose a template
Identity verification
Identity verification must be completed before publishing content, and the information is only used for verification.
Further reading