<main>
	
<h1>Dialog Demo</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p><button onclick="window.dialog.showModal();">Open Dialog</button></p>
</main>

<dialog id="dialog">
<h2>Hi,</h2>
<p>Du hast auf den Dialog Button gedrückt.</p>
<p><button onclick="window.dialog.close();" aria-label="close" class="x">❌</button></p>
</dialog>

button { padding: .5rem; font-size: 1rem; background: #111; color: #fff; }

dialog::backdrop { background: #000; color: #fff; }
dialog { padding: 1rem 3rem; background: #ccc; max-width: 90vw; }

.x { position: absolute; top: .5rem; right: .5rem; }