htmlのdialogの確認

dialog要素にopenをつけることでダイアログを開くことができるほか

const hogeDialogElem = document.querySelector("#hogeDialog");
hogeDialogElem.show();

でも開ける。

また

hogeDialogElem.showModal();

とすることで、モーダルダイアログを開くことができる。

閉じる場合はopen属性をいじることでもできるが

hogeDialogElem.close();

で閉じることができる。

closeには引数を1つ渡すことが可能で、ここには DOMString(文字かな?)を渡すことができる。
その結果は

const result = hogeDialogElem.returnValue;

として参照することができる。

dialog自体にもcloseイベントが存在しており

hogeDialogElem.addEventListener('close', (ev) => {
  console.log(ev.target.returnValue)
})

このように書くことで、結果をハンドリングすることができる。

モーダルの時のバックグラウンドは ::backdrop 疑似要素でスタイリングできる。
        

---

text1: text2: