←WebSprout logoWebSprout

Codelab: A CSS-only Modal

Ship a working modal in your local editor — no JavaScript needed. Use the checkbox-hack to toggle visibility entirely with CSS.

Step 1 of 6

Set up your modal lab

You will build a modal you can open and close without writing a single line of JavaScript. The trick: a hidden checkbox keeps the open/closed state, and CSS sibling selectors react to it.

Open a terminal on Linux with Ctrl + Alt + T:

  • mkdir ~/css-modal-lab
  • cd ~/css-modal-lab
  • touch index.html style.css
  • code .