<div>
<dialog id="dialog">
<form method="dialog">
<p>Hi, I'm a dialog. Notice I have a gray overlay behind me?</p>
<button>OK</button>
</form>
</dialog>
<button onclick="dialog.showModal()">Open Dialog</button>
<dialog id="dialog2" open>
<form method="dialog">
<p>I'm a dialog that is open by default. Notice I have no <i>::backdrop</i> overlay?</p>
<p>Try closing me and having a look at the other dialog that is programatically opened</p>
<button>OK</button>
</form>
</dialog>
</div>
html {
block-size: 100%;
color-scheme: dark light;
}
body {
min-block-size: 100%;
font-family: system-ui, sans-serif;
display: grid;
place-content: center;
margin: 0;
}
::backdrop {
background-color: rgb(255,255,255, 6%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.