・ダイアログを表示し、閉じるボタンでダイアログを閉じるサンプル。

・ダイアログを表示中にダイアログ以外のボタンやリンクの操作ができるか？
  モーダルダイアログ   : 不可
  モードレスダイアログ : 可能

(2023/03-2023/12)
動作: Edge120, Firefox120, Chrome119

◎ノート

・MDN dialog: ダイアログ要素

・モードレスダイアログの場合、ダイアログの背後のページ本体の
　ボタンやリンクも操作できる点に注意。モーダルの場合はページ
　本体の操作は禁止されます。

・form には method="dialog" を指定します。
  これがないとページの再読み込みでリセットされます。

◎ ボタンの type 指定

・form 内の button 要素は type="button" の有無で動作が変わります。

1) type 指定なしの場合はボタンを押すと dialog が閉じます。
  単純に dialog を閉じるだけなら JavaScript の記述は不要です。

2) type="button" の場合はボタンを押しても dialog を閉じません。
  こちらはダイアログの中で別の設定などをするとき使います。

◎ dialog の表示位置

1) モーダルダイアログの場合はウインドの中央に表示されます。

2) モードレスダイアログの場合は呼び出し元の要素に対する相対位置で
　表示されます。