Modal

Modal

Modals temporarily focus attention on a task or message while the underlying page remains in place.

Core concept

Explain modal, dialog, content, header, body, footer, aria-labelledby, sizes, centered and scrollable variants, backdrop, keyboard closing, and trigger relationships.

Using it in a real interface

Build a delete-confirmation modal and a form modal. Explain why destructive confirmation needs a clear action hierarchy and why long forms may need a scrollable dialog.

Implementation notes

Modals should not become a replacement for normal page navigation. If users need to compare information, bookmark a state, or perform a long workflow, a dedicated page may be more usable.