Say hello
The classic: a short message and one way out. This is the original version of the project.
Native <dialog> · Vanilla JS · 0 libraries
Click it. Pop!
A window appears.
A small study of the modal window: the box that pops up on top of a page, waits for your answer and then politely disappears. It closes with Esc, the × button or a click outside.
3
ways to close
3
modal examples
0
dependencies
100%
keyboard friendly
Try three kinds of modals
Are you sure?
A confirm dialog with two choices. Focus starts on the safe button.
Join the list
A modal with a real form, a label and validation. Nothing is sent anywhere.
How it works
-
The browser does the hard part
dialog.showModal()puts the window on top, keeps the focus inside it and makes Esc close it. -
A click outside closes it
If the click lands on the dialog itself and not on its content, it was on the dark backdrop, so we close.
-
CSS makes it pop
The window grows from 92% to 100% and fades in. Only
transformandopacitymove, so it stays smooth.