Example Code

<!-- For this example, we've defined a global variable '$dialog' pointing to the dialog element. -->

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

<dialog id="dialog1">
  <header class="dialog-header">
    <h1>Leave Without Saving?</h1>
    <button
      class="close button"
      onclick="$dialog.close()"
    ></button>
  </header>
  <div class="dialog-body">
    <p>
      You have unsaved edits. What would you like to do?
    </p>
  </div>
  <div class="dialog-footer">
    <button
      class="primary red button"
      onclick="$dialog.close()"
    >
      Discard Changes
    </button>
    <button class="button" onclick="$dialog.close()">
      Keep Editing
    </button>
  </div>
</dialog>

Result