FormsLesson 127Free preview

Popup Form

This lesson is part of How To · All levels

Summary

A popup form is a form that appears on top of a page in the capital layer. The background layer covers other content, while the form appears centralized so that the user's attention is focused on it. Capital like this needs to be able to close with a button, a background click, or an Escape button, and then return the focus to the opening element.

Key points

The overlay uses position: fixed and inset: 0 to cover the entire viewport.
The form is placed centrally within the overlay.
Role="dialog" and aria-modal="true" give context to assistive technology.
The focus is shifted to the first field when the capital is opened.
The Escape button, the shutter button, and the background click must shut down the capital.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.