<dialog id="dialog" class="dialog">
  <button onclick="window.dialog.close()">X</button>
  <p>Dialog Content</p>
</dialog>

<dialog id="dialogModal" class="dialog">
  <button onclick="window.dialogModal.close()">X</button>
  <p>Dialog Modal Content</p>
</dialog>

<button onclick="window.dialog.show();">Show</button>
<button onclick="window.dialogModal.showModal();">Show Modal</button>

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}