Modal dialog

Focus attention on a short task in a dialog above the page.

Live preview Try the effect

Try the controls to understand this pattern.

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Focus attention on a short task in a dialog above the page. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Confirmations and brief forms that require a decision.

Related concepts

A modal blocks the background; a nonmodal popover can coexist with the current task.

Describe this effect

Output language

Open a modal dialog with a clear title, explanation and cancel action. Trap focus while open and return it to the trigger on close.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.