<!doctype html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="/assets/reset.css" rel="stylesheet">
		<link href="setup.css" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
		<script defer src="script.js"></script>
	</head>
	<body>
		<button id="example">Click here!</button>
		<dialog id="dialog">
			<p>I am in a modal overlay!</p>
			<button class="close">Close it!</button>
		</dialog>
	</body>
</html>
index.html
			// This is the same as before, setting up variables.
let button = document.querySelector('#example')
let modal = document.querySelector('#dialog') // Now one for our `dialog`.
let closeButton = modal.querySelector('.close') // Only looking within `modal`.

button.onclick = () => { // “Listen” for clicks.
	modal.showModal() // This opens it up.
}

closeButton.onclick = () => {
	modal.close() // And this closes it!
}

modal.onclick = (event) => { // Listen on our `modal` also…
	if (event.target == modal) { // Only if clicks are to itself (the background).
		modal.close() // Close it then too.
	}
}
script.js
			html, body { height: 100%; }

body {
	--base: 20px;

	align-items: center;
	display: flex;
	font-family: sans-serif;
	justify-content: center;
	padding: var(--base);
}

button {
	background-color: deepskyblue;
	border-radius: calc(var(--base) / 2);
	cursor: pointer; /* Show the Mickey-Mouse hand! */
	padding: calc(var(--base) / 2);
}
setup.css
			dialog {
	color: white;
	gap: calc(4 * var(--base));
	inset: 0; /* Fill the viewport! */
	place-content: center; /* Center the tracks. */
	place-items: center; /* Center within the tracks. */

	&[open] { display: grid } /* `block` is default, but we can override. */
}

.close { background-color: tomato; } /* Always have a clear “close” `button`. */

::backdrop {
	background-color: rgb(0 0 0 / 75%); /* A dark overlay. */
	backdrop-filter: blur(8px); /* Maybe a little “glassmorphism”? */
}
style.css