<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>
詳しくは下記のページをご覧ください。
- 旧HTMLからの変更点
-
- HTML5.2：dialog要素が定義されました。
- HTML LS：要素カテゴリーがセクショニング・ルートではなくなりました。［2022/07/05］
使用例
<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>
- 表示例
- モードレスダイアログの場合は、周囲の領域も操作が可能となります。