<dialog open>
  <p>This is a dialog box</p>
</dialog>

<dialog id="myDialog">
  <p>Hello Dialog</p>
  <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

<dialog id="formDialog">
  <form method="dialog">
    <p>Are you sure?</p>
    <button value="yes">Yes</button>
    <button value="no">No</button>
  </form>
</dialog>

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

dialog {
  border: none;
  border-radius: 10px;
  padding: 20px;
}

dialog::backdrop {
  background: rgba(0,0,0,0.5);
}