← All elements
<input type="checkbox" id="mo"><label for="mo" class="open">Open dialog</label><div class="ov"><label for="mo" class="bd"></label><div class="box"><h3>Delete file?</h3><p>This action cannot be undone.</p><label for="mo" class="ok">Got it</label></div></div>About this layout
A modal that opens and closes with a hidden checkbox and two labels, with a fading backdrop and a pop-in panel.
How it works
A hidden checkbox stores whether the dialog is open. The overlay starts invisible, and the :checked state makes it visible with a fade, while the box scales up with a springy easing. The Open button and the backdrop are labels for the checkbox, so clicking either toggles it.
Ways to customise it
- Change the backdrop colour and opacity in the .bd rule.
- Edit the box width and padding to fit more content.
- Add another label inside the box as an extra close button.
Good to know
This is a visual dialog pattern without script, so it does not trap focus or close on Escape. For important flows use the native dialog element with script. Keep content short and add a clear close action.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.