<dialog></dialog>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | フロー・コンテンツ |
dialog要素は、ダイアログボックスを表します。（以下、ダイアログと表記）
- ダイアログの表示には、dialog要素の他にJavaScriptが必要となります。
<dialog>
ダイアログボックス
</dialog>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
open |
ダイアログが開いた状態にする | （open） |
値は省略可能 |
dialog要素に対応しているブラウザでは、JavaScriptと組み合わせることでダイアログを表示することができます。
上記ボタンのダイアログは、次のコードで作成されています。ダイアログを表示する際の参考にしてください。
<p><button type="button" id="openButton">ダイアログを表示</button></p>
<dialog id="exDialog" style="width: 250px; height: 150px; text-align: center;">
<p>ダイアログ</p>
<p><button type="button" id="closeButton">閉じる</button></p>
</dialog>
<script>
var openButton = document.getElementById('openButton');
var closeButton = document.getElementById('closeButton');
var exDialog = document.getElementById('exDialog');
openButton.addEventListener('click', function() {
exDialog.showModal();
// showModal() = モーダルダイアログ（周囲の領域は操作不能）
// show() = モードレスダイアログ（周囲の領域も操作可能）
});
closeButton.addEventListener('click', function() {
exDialog.close();
});
</script>
showModal()の部分をshow()に変更すると、モーダルダイアログからモードレスダイアログに変更することができます。
open属性について
open属性は、ダイアログが表示された状態を指定します。この属性が省略された場合は、非表示の状態がデフォルトになります。
<dialog open>
<p>ダイアログ</p>
</dialog>
form要素との組み合わせについて
method="dialog" が指定されたform要素をdialog要素内に配置すると、フォームの送信ボタンが押された際にダイアログが閉じるようになります。
<dialog id="example">
<form method="dialog">
<p>ここにフォーム部品を配置</p>
<p><button type="submit">確定</button></p>
</form>
</dialog>
詳しくは下記のページをご覧ください。
ダイアログ内のフォーカスについて
ダイアログ内にフォーム部品を配置していると、ダイアログを開いた時に最初のフォーム部品がフォーカスされることになります。
次の例では、1つ目の入力欄がフォーカスされます。（これがデフォルトの状態です）
<dialog>
<p><input type="text"></p>
<p><input type="text"></p>
<form method="dialog">
<button type="submit">閉じる</button>
</form>
</dialog>
しかし、以下のような構成の場合には、1つ目のフォーム部品（閉じるボタン）ではなく、2つ目のフォーム部品（入力欄）がフォーカスされた方が良いでしょう。
このような場合は、autofocus属性を使用してフォーカスされるべき要素（この例では入力欄）を指定します。
<dialog>
<form method="dialog">
<button type="submit">閉じる</button>
</form>
<p><input type="text" autofocus></p>
</dialog>
仕様書によると、仮に1つ目のフォーム部品がフォーカスされるべき要素であったとしても、その要素に対してautofocus属性を指定しておくのが最良であるとしています。（例えば、別の開発者が1つ目のフォーム部品として閉じるボタンを配置してしまうことに備えて）
<dialog>
<p><input type="text" autofocus></p>
<p><input type="text"></p>
<form method="dialog">
<button type="submit">閉じる</button>
</form>
</dialog>
同じく仕様書によると、ダイアログ内にフォーカスされるべき要素が存在しない場合は、dialog要素自体にautofocus属性を指定すべきとしています。
<dialog autofocus>
<p>ダイアログ</p>
</dialog>
ダイアログ内のスクロールについて
ダイアログからオーバーフローしたコンテンツは、スクロールで表示されることになります。
そのような場合（またはその可能性がある場合）は、例えば以下のようにdiv要素を配置して、dialog要素自体がオーバーフローしてしまうことを避けるのが最良であるとされています。
<dialog style="width: 250px; height: 150px; text-align: center;">
<div style="overflow: auto; height: 120px; background-color: #f0f0f0;" autofocus>
<p>ダイアログ内のテキスト。...</p>
<p>ダイアログ内のテキスト。...</p>
<p>ダイアログ内のテキスト。...</p>
</div>
<form method="dialog">
<button type="submit">閉じる</button>
</form>
</dialog>
上記の例では、div要素に対してautofocus属性が指定されています。
仮に、div要素を配置せずautofocus属性を指定しなかった場合は以下のようになります。（ボタンがフォーカスされ、下にスクロールした状態で表示されます）
- 旧HTMLからの変更点
-
- HTML5.2：dialog要素が定義されました。
- HTML LS：要素カテゴリーがセクショニング・ルートではなくなりました。［2022/07/05］
- HTML LS：フォーカスとスクロールに関する説明、およびtabindex属性に関する注意書きを追記しました。［2023/04/28］
使用例
<p><button type="button" id="openButton1">モーダルダイアログを表示</button></p>
<dialog id="exDialog1" style="width: 250px; height: 150px; text-align: center;">
<p>モーダルダイアログ</p>
<p><button type="button" id="closeButton1">閉じる</button></p>
</dialog>
<script>
var openButton1 = document.getElementById('openButton1');
var closeButton1 = document.getElementById('closeButton1');
var exDialog1 = document.getElementById('exDialog1');
openButton1.addEventListener('click', function() {
exDialog1.showModal();
// showModal() = モーダルダイアログ（周囲の領域は操作不能）
// show() = モードレスダイアログ（周囲の領域も操作可能）
});
closeButton1.addEventListener('click', function() {
exDialog1.close();
});
</script>
- 表示例
- モーダルダイアログの場合は、周囲の領域は操作不能となります。
<p><button type="button" id="openButton2">モードレスダイアログを表示</button></p>
<dialog id="exDialog2" style="width: 250px; height: 150px; text-align: center;">
<p>モードレスダイアログ</p>
<p><button type="button" id="closeButton2">閉じる</button></p>
</dialog>
<script>
var openButton2 = document.getElementById('openButton2');
var closeButton2 = document.getElementById('closeButton2');
var exDialog2 = document.getElementById('exDialog2');
openButton2.addEventListener('click', function() {
exDialog2.show();
// showModal() = モーダルダイアログ（周囲の領域は操作不能）
// show() = モードレスダイアログ（周囲の領域も操作可能）
});
closeButton2.addEventListener('click', function() {
exDialog2.close();
});
</script>
- 表示例
- モードレスダイアログの場合は、周囲の領域も操作が可能となります。