<dialog id="confirm">
  <form method="dialog">
    <p>Delete item?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">Delete</button>
  </form>
</dialog>
<script>
  const d = document.getElementById("confirm");
  openBtn.onclick = () => d.showModal();
  d.addEventListener("close", () => console.log(d.returnValue));
</script>

<dialog id="dlg" aria-labelledby="dlg-title">
  <header>
    <h2 id="dlg-title">Settings</h2>
    <button type="button" class="close" aria-label="Close">&times;</button>
  </header>
  <form id="settings">...</form>
  <menu>
    <button type="button" class="close">Close</button>
    <button type="submit" form="settings">Save</button>
  </menu>
</dialog>

<style>
  dialog::backdrop {
    background: rgb(0 0 0 / 0.45);
  }
  dialog[open] {
    border: 0;
    border-radius: 12px;
    padding: 1.25rem;
  }
</style>

<script>
  const dlg = document.getElementById("dlg");
  dlg.querySelectorAll(".close").forEach((b) =>
    b.addEventListener("click", () => dlg.close()),
  );
  // Optional: light dismiss
  dlg.addEventListener("click", (e) => {
    const rect = dlg.getBoundingClientRect();
    const inDialog =
      rect.top <= e.clientY &&
      e.clientY <= rect.top + rect.height &&
      rect.left <= e.clientX &&
      e.clientX <= rect.left + rect.width;
    if (!inDialog) dlg.close();
  });
</script>