HTML: dialog タグ

概略

dialog タグ は単純なポップアップの表示だけでなく、 モーダルなダイアログの表示も行えるタグです。 IE や少し古い Web ブラウザでは使用できないタグでしたが 現在では使用できます。 最近使えるようになったタグです。

• MDN: dialog: ダイアログ要素

・ブラウザの対応時期
  Firefox  98以降 (2022年春)
  Safari 15.4以降 (2022年春)
  Edge     79以降 (2020年頭, Chromium Edge以降)

dialog タグでは display: block, none の処理を使いません

dialog タグには open 属性 や JavaScript の show()、showModal()、close() があり、 こちらで表示・非表示を制御します。

モーダルダイアログとモードレスダイアログ

ダイアログの表示には 1) モーダル と 2) モードレス の 2種類の表示方法があります。

モーダルダイアログでは ダイアログ以外のページ本体のボタンやリンクの操作ができない状態になります。 アプリケーションの画面で多用するダイアログです。 アプリケーションではダイアログを表示中に 背後の他のボタンを操作してほしくない (動作に混乱が生じる) 話が多いので、 このような場面でモーダルダイアログを使用します。

モードレスダイアログの場合は ダイアログ以外の他のボタンやリンクも操作できます。

showModal()   モーダルのダイアログを表示する。
show()        モードレスのダイアログを表示する。

• TestJS_dialog_form_button01.html
  モーダルダイアログとモードレスダイアログのサンプル。
  

サンプル

モーダルダイアログを表示する

Promise と async/await で処理する

サンプル TestJS_dialog_form_button02.html では 1) ダイアログを開く処理と 2) ダイアログを閉じて選択したボタンの値を受け取った後の処理が 別々に分かれています。

モーダルダイアログを下のような書き方で 1つにまとめて処理したい場合もあります。 openModalDialog() は Promise と async/await を使った処理になります。

//ダイアログを開く。
//ダイアログを閉じるまで待機する (await)。
//押したボタンの値を返して result にセットする。
const result = await openModalDialog();

//ここからはダイアログを閉じた後の処理になる。

//result を見て次の処理を行う。
if (result == "value1"){
	...
}
else if ...

• TestJS_dialog_modal_async01.html (2023/07)
  モーダルダイアログの処理のサンプル。 ダイアログが閉じるまで await で待機し、 ダイアログで押されたボタンの値を Promise.then() で受け取る。
  

関連

• HTML: form タグ
• CSS: 要素の表示・非表示
• CSS: 要素の配置: 左右中央, 上下中央