# A modal, through the years

> One dialog, “Eat the last cookie?”, redrawn in the style of each era from the first Macintosh to today. Hover the timeline to watch it change.

An interactive page on https://baked.design/fun/modal/. Hover, drag or use the arrow keys along the timeline, and the same dialog (“Eat the last cookie? Someone might have been saving it.” with Cancel and Eat it) redraws itself in the style of each era. Press Eat it in any era and the dialog turns into the last cookie, three bites are taken out of it, crumbs and all, and a fresh dialog appears. Cancel gives it a little shake. Every drawing is plain HTML and CSS: no images.

## The stops

- 1984, Macintosh: Black and white, a double outline, and a heavy ring around the button you're most likely to press.
- 1995, Windows 95: Grey bevels, a navy title bar, a close box, and Yes or No.
- 2001, Mac OS X: The dialog slides out of the window's title bar as a sheet, and the default button pulses like blue gel.
- 2005, Lightbox: Websites fake it: dim the page, float a box in the middle, put Close in the corner.
- 2007, iPhone: Glossy blue glass, white text and two big buttons made for a thumb.
- 2012, Bootstrap: A header with a close ×, a body, and a grey footer with the buttons on the right.
- 2013, iOS 7: The gloss is gone. Frosted white, hairline dividers and plain blue words for buttons.
- 2014, Material Design: A white card on a dark scrim, a soft shadow and capital-letter text buttons.
- 2025, Liquid Glass: Rounded, see-through glass that picks up the colour behind it, with pill-shaped buttons.
- Now, Baked: How we'd build it: the browser's built-in dialog element, Esc to close, focus kept inside, and plain words on the buttons.

## More
- Everything on /fun: https://baked.design/fun/
- Home: https://baked.design/