<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; }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.