目次に戻る

dialog要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性
  • グローバル属性（ただし、tabindex属性は指定禁止）
  • closedby→値は下記のとおり。ダイアログボックスを閉じる操作の初期設定。デフォルトは、モーダルダイアログの場合はcloserequest、そうでない場合はnone
  • open→ブーリアン属性。指定されていれば、それがアクティブで、かつ、ユーザーが操作しうることを示す（→モードレスダイアログで開く）。指定されてなければ、当該dialog要素は表示されない。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、dialog。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、alertdialogを指定可。
視覚系ブラウザのデフォルトとして期待されるCSS

  dialog {
    display: block;
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
    border: solid;
    padding: 1em;
    background-color: Canvas;
    color: CanvasText;
  }

  dialog:modal {
    position: fixed;
    overflow: auto;
    inset-block: 0;
    max-width: calc(100% - 6px - 2em);
    max-height: calc(100% - 6px - 2em);
  }

  dialog::backdrop {background: rgba(0,0,0,0.1);}
  dialog:not([open]) {display: none;}
意味・用法

タスクを実行したり情報を収集したりするためにユーザーと対話する小さなウィンドウ（→ダイアログボックス）という形態で、アプリケーションの一時的な部分を表す。

ユーザーの操作が完了すると、ダイアログボックスはアプリケーションによって自動的に閉じられるか、ユーザーによって手動で閉じられる。

コンテキストメニュー、ツールチップ、ポップアップリストボックスなどに、この要素を使用するのは、正しくない。

モーダルダイアログとして表示された場合は、「当該要素及びその子孫要素」以外を不活性にする。

私見・補足

開閉の動作を制御する主な手段は下記のとおり。

表示確認

ソース１

  dialog要素非対応ブラウザだと、最初から全部表示されちゃうよ。
  <div>
    <button type="button" onclick="document.getElementById('dialog1').show();">
      モードレスダイアログでdialogを表示するボタン
    </button>
  </div>
  <dialog id="dialog1" onclose="document.getElementById('result1').value=this.returnValue;">
    <span>ダイアログ１</span>
    <form method="dialog">
      <div><button type="submit" name="submit1" value="ボタン１が押されたよ">ボタン１</button></div>
      <div><button type="submit" name="submit2" value="ボタン２が押されたよ">ボタン２</button></div>
    </form>
    <button type="button" onclick="document.getElementById('dialog1').close();">
      dialogを閉じるボタン
    </button>
  </dialog>
  <label>ダイアログ１のフォームで押されたボタン→<output id="result1"></output></label>
表示結果１
dialog要素非対応ブラウザだと、最初から全部表示されちゃうよ。
ダイアログ１
ソース２

  dialog要素非対応ブラウザだと、最初から全部表示されちゃうよ。
  <div>
    <button type="button" commandfor="dialog2" command="show-modal">
      モーダルダイアログでdialogを表示するボタン
    </button>
  </div>
  <dialog id="dialog2" onclose="document.getElementById('result2').value=this.returnValue;">
    <span>ダイアログ２</span>
    <form method="dialog">
      <div><button type="submit" name="submit3" value="ボタン３が押されたよ">ボタン３</button></div>
      <div><button type="submit" name="submit4" value="ボタン４が押されたよ">ボタン４</button></div>
    </form>
    <button type="button" commandfor="dialog2" command="close">
      dialogを閉じるボタン
    </button>
  </dialog>
  <label>ダイアログ２のフォームで押されたボタン→<output id="result2"></output></label>
表示結果２
dialog要素非対応ブラウザだと、最初から全部表示されちゃうよ。
ダイアログ２