Modals - About modals

Some interactive popup dialogues are meant to steal focus and prevent the user from interacting with the rest of the page. These are called ‘modal’.

Example

An example is an image gallery lightbox — while viewing the images, the page content behind it is not available for interaction.

How they work

Typically, modal dialogues are accompanied by a visual overlay that partially obscures the rest of the page, and mouse users are prevented from clicking on anything outside the dialogue. Similarly, keyboard focus should get trapped within the dialogue, and all content outside the dialogue should be rendered inert to assistive technologies like screen readers