HTMLDialogElement

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

HTMLDialogElement インターフェイスは <dialog> 要素を操作するメソッドを提供します。 HTMLElement インターフェースからプロパティとメソッドを継承しています。

プロパティ

親である HTMLElement からプロパティを継承しています。

HTMLDialogElement.open
Boolean で、ダイアログが対話可能であることを示す open 属性の値を反映します。
HTMLDialogElement.returnValue
DOMString で、ダイアログの返値を設定させたり返したりします。

メソッド

親である HTMLElement からメソッドを継承しています。

HTMLDialogElement.close()
ダイアログを閉じます。任意で引数として DOMString を渡すことができ、これがダイアログの returnValue を更新します。
HTMLDialogElement.show()
ダイアログをモードレスで開きます。すなわち、その間のダイアログの外のコンテンツとの対話ができます。
HTMLDialogElement.showModal()
ダイアログをモーダルで、他のダイアログがあればその最も上に表示します。ダイアログの外との対話はブロックされます。

イベント

close
ダイアログが閉じられたときに発生します。
onclose プロパティからも利用できます。

以下の例は単純なボタンを表示し、クリックすると、 <dialog> でフォームを HTMLDialogElement.showModal() 関数によって開きます。そこから Cancel ボタンを押して (HTMLDialogElement.close() 関数で) ダイアログを閉じるか、 submit ボタンでフォームを送信するかします。

  <!-- Simple pop-up dialog box, containing a form -->
  <dialog id="favDialog">
    <form method="dialog">
      <section>
        <p><label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal" name="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select></p>
      </section>
      <menu>
        <button id="cancel" type="reset">Cancel</button>
        <button type="submit">Confirm</button>
      </menu>
    </form>
  </dialog>

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

  <script>
    (function() {
      var updateButton = document.getElementById('updateDetails');
      var cancelButton = document.getElementById('cancel');
      var dialog = document.getElementById('favDialog');
      dialog.returnValue = 'favAnimal';

      function openCheck(dialog) {
        if(dialog.open) {
          console.log('Dialog open');
        } else {
          console.log('Dialog closed');
        }
      }

      // Update button opens a modal dialog
      updateButton.addEventListener('click', function() {
        dialog.showModal();
        openCheck(dialog);
      });

      // Form cancel button closes the dialog box
      cancelButton.addEventListener('click', function() {
        dialog.close('animalNotChosen');
        openCheck(dialog);
      });

    })();
  </script>

メモ: この例は GitHub 上の htmldialogelement-basic (ライブで表示) として見つけることができます。

仕様書

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
HTMLDialogElement
実験的
Chrome 完全対応 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 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なし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 未対応 なし
cancel eventChrome 完全対応 ありEdge 完全対応 79Firefox 完全対応 78IE 未対応 なしOpera ? Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
close
実験的
Chrome 完全対応 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 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なし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 未対応 なし
close eventChrome 完全対応 ありEdge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera ? Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
open
実験的
Chrome 完全対応 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 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なし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 未対応 なし
returnValue
実験的
Chrome 完全対応 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 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なし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 未対応 なし
show
実験的
Chrome 完全対応 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 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なし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 未対応 なし
showModal
実験的
Chrome 完全対応 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 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なし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 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

  • このインターフェイスを実装している HTML 要素: <dialog>