How to Modal

July 31, 2021

This guide will help you build a modal properly.

This was shared in WeBuild - a popular dev community in Vietnam.

Focus trap

The focus trap should follow the figure’s order.

Accessible dismissal

Clicking on the modal background (which should usually cover the whole page) or pressing Escape should close the modal.

Guard against accidental dismissal

When the form is filled, require explicit cancelation or submission to prevent users from losing progress or forgetting to submit.

Sticky header & footer

In a long modal, make the header and the footer sticky so that users can see the control buttons without scrolling.

Filterable lists

• Make long lists filterable
• Should have a button to clear the filter
• Set min-height to prevent layout shift when filtering