A modal is a box that opens over the top of a web page and freezes everything behind it until you deal with it. The rest of the page usually dims, and you can only click inside the box: confirm, fill in a field, or close it. The name comes from "mode": while it is open, the page is in a different mode where only the box responds.
How a modal takes over the screen
Technically a modal is a layer positioned above the page, plus a semi-transparent backdrop that catches clicks so nothing underneath reacts. Modern browsers have a built-in element for this, <dialog>, and calling its showModal() method makes the rest of the document inert, traps keyboard focus inside the dialog and lets the Escape key close it. Older sites and many component libraries build the same behaviour by hand with JavaScript, which is where most of the bugs come from.
A well-built modal does four things: moves keyboard focus into the box when it opens, keeps Tab cycling inside it, closes on Escape, and returns focus to the button that opened it. Screen readers need the box marked as a dialog with a label, either through the native element or ARIA attributes such as role="dialog" and aria-modal="true".
Confirming a removal from a cake order
A bakery's online ordering page lists cakes. When a shopper clicks "Remove" next to a cake in their basket, a small modal asks "Remove the chocolate torte from your order?" with two buttons, Remove and Keep it. The shopper cannot scroll away or tap anything else until they answer, which is exactly the point: a destructive action gets one deliberate pause.
Modal versus pop-up
People use the words loosely. A modal describes behaviour (it blocks the page). A pop-up usually describes intent, often an unprompted marketing message such as a discount offer. Many pop-ups are built as modals, but a modal the visitor opened on purpose, like an image enlarged in a lightbox, is not what most people mean by a pop-up.
When a small-business site needs one
Use a modal when the visitor must answer before continuing: confirming a deletion, logging in without leaving the page, or picking a size before adding to cart. For long content such as a full booking form or terms, a separate page is usually easier to read, share and use on a phone.
Where modals go wrong
- No obvious way out. A tiny or missing close button, and no Escape key support, traps people.
- Opening on page load. A box that covers content before anyone has read a word annoys visitors, and on mobile Google treats intrusive interstitials as a poor experience.
- Background still scrolls. On phones the page behind can scroll under the box, which disorients users.
- Focus left behind. Keyboard and screen reader users keep tabbing through the hidden page and never reach the dialog.
- Stacking modals. A modal that opens another modal is a sign the task needs its own page.
Related terms
- Pop-up: often built as a modal, usually for marketing.
- ARIA: attributes that tell assistive technology a dialog is open.
- Web accessibility: the standards a modal's focus handling must meet.
- Microcopy: the short button labels that make a confirmation clear.