dialog要素

dialog要素は、ダイアログボックスを表す。（以下、ダイアログと表記）
※ダイアログの表示には、dialog要素の他にJavaScriptが必要となる。

<dialog>
  ダイアログボックス
</dialog>

ダイアログ

上記ボタンのダイアログは、以下のコードで作成されている。

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

ダイアログ内のフォーカスについて

ダイアログ内にフォーム部品を配置していると、ダイアログを開いた時に最初のフォーム部品がフォーカスされるが、autofocus属性を使用するとフォーカスされるべき要素を指定することができる。

<dialog>
  <form method="dialog">
    <button type="submit">閉じる</button>
  </form>
  <p><input type="text" autofocus></p>
</dialog>

上記のような構成の場合、1つ目のフォーム部品（閉じるボタン）ではなく、2つ目のフォーム部品（入力欄）がフォーカスされる。

仕様書によると、ダイアログ内にフォーカスされるべき要素が存在しない場合は、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>

tabindex属性は、dialog要素で指定してはならないとされている。

inserted by FC2 system