HTMLDialogElement: open プロパティ

<!-- 単純なポップアップダイアログボックス -->
<dialog id="dialog">
  <form method="dialog">
    <button type="submit">閉じる</button>
  </form>
</dialog>

<p>
  <button id="openDialog">ダイアログを開く</button>
</p>
<p id="dialogStatus"></p>

const openDialog = document.getElementById("openDialog");
const dialog = document.getElementById("dialog");
const text = document.getElementById("dialogStatus");

function openCheck(dialog) {
  if (dialog.open) {
    text.innerText = "ダイアログが開きました";
  } else {
    text.innerText = "ダイアログが閉じました";
  }
}

// ボタンでモーダルダイアログを開く
openDialog.addEventListener("click", () => {
  dialog.showModal();
  openCheck(dialog);
});

dialog.addEventListener("close", () => {
  openCheck(dialog);
});