<dialog>: ダイアログ要素

HTML の <dialog> 要素は、ダイアログボックスや、消すことができるアラート、インスペクター、サブウィンドウ等のような対話的コンポーネントを表します。

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

属性

この要素にはグローバル属性があります。

tabindex 属性を <dialog> 要素で使用してはいけません。

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

使用上の注意

  • <form> 要素は method="dialog" 属性が指定されていれば、ダイアログを閉じることができます。そのようなフォームが送信されると、 returnValue プロパティがフォーム送信するために使用されたボタンの value に設定されて、ダイアログが閉じられます。
  • CSS の ::backdrop 擬似要素を使用して、 <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 value="cancel">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </menu>
  </form>
</dialog>

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

<output aria-live="polite"></output>

JavaScript

var updateButton = document.getElementById('updateDetails');
var favDialog = document.getElementById('favDialog');
var outputBox = document.querySelector('output');
var selectEl = document.querySelector('select');
var confirmBtn = document.getElementById('confirmBtn');

// "Update details" button opens the <dialog> modally
updateButton.addEventListener('click', function onOpen() {
  if (typeof favDialog.showModal === "function") {
    favDialog.showModal();
  } else {
    alert("The <dialog> API is not supported by this browser");
  }
});
// "Favorite animal" input sets the value of the submit button
selectEl.addEventListener('change', function onSelect(e) {
  confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener('close', function onClose() {
  outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString();
});

結果

仕様書

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
dialogChrome 完全対応 37Edge 完全対応 79Firefox 完全対応 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 完全対応 37Firefox 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 完全対応 24Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
openChrome 完全対応 37Edge 完全対応 79Firefox 完全対応 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 完全対応 37Firefox 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 完全対応 24Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0

凡例

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

ポリフィル

<dialog> 要素のないブラウザーには、このポリフィルを含めてください。

dialog-polyfill

関連情報