HTML Living Standard/dialog

DIALOG要素

<dialog>要素は、モーダル（ダイアログボックス）や対話型コンポーネントを表現するために使用されるHTML要素です。この要素は、ユーザーとのインタラクションを目的とした内容を提示するのに適しています。

定義

<dialog>要素は、モーダルまたは非モーダルのダイアログを表現します。
モーダル状態では、ダイアログ外の操作が無効化されます。
非モーダル状態では、他の操作と並行して利用可能です。

使用方法

基本例

以下は、<dialog>要素を使用してモーダルダイアログを表示する例です。

<dialog id="exampleDialog">
  <p>こちらはモーダルダイアログです。</p>
  <button id="closeButton">閉じる</button>
</dialog>

スクリプトで表示を制御します：

const dialog = document.getElementById('exampleDialog');
const closeButton = document.getElementById('closeButton');

// ダイアログを表示
dialog.showModal();

// 閉じるボタンのクリックでダイアログを閉じる
closeButton.addEventListener('click', () => dialog.close());

非モーダルダイアログ

非モーダルのダイアログを使用する場合は、showModal()ではなくshow()を使用します。

dialog.show(); // 非モーダルで表示

属性

以下は、<dialog>要素で使用可能な属性です。

open: ダイアログが表示されていることを示します。JavaScriptで制御可能です。
グローバル属性: idやclassなど、スタイリングやスクリプト用に利用できます。

メソッド

<dialog>要素には次のJavaScriptメソッドが提供されています：

show(): ダイアログを非モーダル状態で表示します。
showModal(): ダイアログをモーダル状態で表示します。
close(): ダイアログを閉じます。

例：

const dialog = document.querySelector('dialog');

// モーダル表示
dialog.showModal();

// 非モーダル表示
dialog.show();

// 閉じる
dialog.close();

イベント

close: ダイアログが閉じられたときに発生します。
cancel: モーダルダイアログが閉じられたときに（ユーザーがESCキーなどでキャンセルした場合）発生します。

dialog.addEventListener('close', () => {
  console.log('ダイアログが閉じられました');
});
dialog.addEventListener('cancel', () => {
  console.log('ダイアログがキャンセルされました');
});

アクセシビリティ

ダイアログを表示するときは、フォーカスを適切に設定する必要があります。
aria-labelledby属性やaria-describedby属性を使用して、内容を支援技術に説明することを推奨します。

<dialog aria-labelledby="dialogTitle" aria-describedby="dialogDescription">
  <h2 id="dialogTitle">タイトル</h2>
  <p id="dialogDescription">詳細な説明文です。</p>
  <button>閉じる</button>
</dialog>

注意事項

<dialog>要素をサポートしていないブラウザでは、代替方法を実装する必要があります。
モーダルダイアログの使用は、必要最小限に留め、ユーザーの体験を妨げないように注意してください。

使用例

フォーム内の確認ダイアログ

<dialog id="confirmDialog">
  <p>この操作を実行してもよろしいですか？</p>
  <button id="confirmYes">はい</button>
  <button id="confirmNo">いいえ</button>
</dialog>

スクリプト：

const confirmDialog = document.getElementById('confirmDialog');
const confirmYes = document.getElementById('confirmYes');
const confirmNo = document.getElementById('confirmNo');

confirmDialog.showModal();

confirmYes.addEventListener('click', () => {
  console.log('操作が確認されました');
  confirmDialog.close();
});

confirmNo.addEventListener('click', () => {
  console.log('操作がキャンセルされました');
  confirmDialog.close();
});