CodePen Embed - Basic <dialog>

<dialog id="dialog">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>OK</button>
  </form>
</dialog>

<button onclick="dialog.showModal()">Open Dialog</button>

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;
}

This Pen is owned by web.dev on CodePen. It is a fork of this Pen.

See more by @web-dot-dev on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.