dialogのshowModal()とshow()の違いがわからなかったので調べた
showModal()とshow()は、JavaScriptでダイアログボックスやモーダルウィンドウを表示するための関数
違いをざっと書き出す
showModal()
- モーダルダイアログを表示するために使用される
- モーダルウィンドウが表示されている間、それ以外にコンテンツとのやり取りは無視される
- ESCで閉じることができる
- 呼び出された場合、暗黙のうちに
aria-modal="true"になる - ::backdrop 擬似要素を使用して背後のスタイルを設定することができる
show()
- 一時的なポップアップウィンドウやダイアログボックスを表示するために使用される
- モーダルウィンドウが表示されている間、それ以外にコンテンツとのやり取りすることができる showModal()と同様にそれ以外にコンテンツとのやり取りを無視するにはinnertを使う
- ESCで閉じることができない
backdropについて
::backdrop 擬似要素を使用すると、モーダルウィンドウが表示されている間、コンテンツの周りの背景をスタイル設定することができる
::backdrop - CSS: カスケーディングスタイルシート | MDN
これまでモーダルコンテンツの下のレイヤーにOverlayといった画面いっぱいに覆う要素を用意していたが、それが不要になる
