<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>

表示例

モードレスダイアログ

  • モードレスダイアログの場合は、周囲の領域も操作が可能となります。