HTML の <dialog> 要素は、ダイアログボックスやインスペクターやウィンドウのようなそのほかの対話的コンポーネントを表します。

コンテンツカテゴリ フローコンテンツ, 区分化ルート
許可された内容 フローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フローコンテンツを受け入れるあらゆる要素
許可された ARIA ロール alertdialog
DOM インターフェイス HTMLDialogElement

属性

この要素はグローバル属性を含みます。tabindex 属性を <dialog> 要素で使用してはいけません。

open
ダイアログがアクティブで操作で使用できることを示します。 open 属性が設定されていないときは、ダイアログはユーザーに表示されません。

使用上の注意

  • method="dialog" 属性を指定することで、<form> 要素を dialog 内に統合できます。そのようなフォームが送信された場合、フォームの使用された送信ボタンの value 属性が returnValue 属性に設定されて、ダイアログが閉じられます。
  • CSS の ::backdrop 擬似要素を <dialog> 要素のスタイルに使用できます。たとえば、モーダルダイアログがアクティブな間にアクセスできないコンテンツを暗くすることができます。バックドロップは dialog 要素が HTMLDialogElement.showModal() で表示されている時だけ表示されます。

シンプルな例

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

応用的な例

この例では、"Update details" ボタンがクリックされると、フォームを含むダイアログボックスが開きます。

HTML

<!-- Simple pop-up dialog box containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <p><label>Favorite animal:
      <select>
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select>
    </label></p>
    <menu>
      <button>Cancel</button>
      <button>Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<div id="output"></div>

JavaScript

(function() {
  var updateButton = document.getElementById('updateDetails');
  var favDialog = document.getElementById('favDialog');
  var outputBox = document.getElementById("output");

  // “Update details” button opens the <dialog> modally
  updateButton.addEventListener('click', function() {
    favDialog.showModal();
    output.innerHTML += "<div>" + favDialog.returnValue + " button clicked!</div>";
  });
})();

結果

どのボタンがクリックされたかは、 favDialogreturnValue で特定することができます。

仕様書

仕様書 状態 備考
HTML Living Standard
<dialog> の定義
現行の標準  
HTML 5.2
<dialog> の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 37Edge 未対応 なしFirefox 完全対応 53
補足 無効
完全対応 53
補足 無効
補足 See bug 840640.
無効 From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 24Safari 未対応 なしWebView Android 完全対応 37Chrome Android 完全対応 37Edge Mobile 未対応 なしFirefox Android 完全対応 53
補足 無効
完全対応 53
補足 無効
補足 See bug 840640.
無効 From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
openChrome 完全対応 37Edge 未対応 なしFirefox 完全対応 53
補足 無効
完全対応 53
補足 無効
補足 See bug 840640.
無効 From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 24Safari 未対応 なしWebView Android 完全対応 37Chrome Android 完全対応 37Edge Mobile 未対応 なしFirefox Android 完全対応 53
補足 無効
完全対応 53
補足 無効
補足 See bug 840640.
無効 From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

ポリフィル

古いブラウザーをサポートするには、このポリフィルを含めてください。

dialog-polyfill

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, YuichiNukiyama, hamasaki
最終更新者: mfuji09,