←WebSprout logoWebSprout

Capstone: A Modal Overlay

Combine fixed, absolute, and z-index to build a modal that hovers above the page with a dark backdrop and a centred dialog box.

Step 1 of 3

The brief

You are building the visual structure of a modal — the kind that opens when you click 'Delete account' or 'Confirm order'.

Requirements:

  1. A full-viewport translucent black backdrop (position: fixed, edges at 0).
  2. A white dialog centred on the screen — use position: fixed and a transform trick, or set top/left with negative offsets.
  3. A close button positioned in the top-right corner of the dialog (position: absolute).
  4. The dialog must paint on top of the backdrop, the backdrop must paint on top of everything else.