--- title: HTMLDialogElement slug: Web/API/HTMLDialogElement tags: - API - Experimental - HTML DOM - HTMLDialogElement - Interface - Reference - インターフェイス translation_of: Web/API/HTMLDialogElement ---
{{APIRef("HTML DOM")}}{{SeeCompatTable}}

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

{{InheritanceDiagram(600, 80)}}

プロパティ

親である {{domxref("HTMLElement")}} からプロパティを継承しています。

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

メソッド

親である {{domxref("HTMLElement")}} からメソッドを継承しています。

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

イベント

{{domxref("HTMLDialogElement/close_event", "close")}}
ダイアログが閉じられたときに発生します。
{{domxref("GlobalEventHandlers/onclose", "onclose")}} プロパティからも利用できます。

例

以下の例は単純なボタンを表示し、クリックすると、 {{htmlelement("dialog")}} でフォームを {{domxref("HTMLDialogElement.showModal()")}} 関数によって開きます。そこから Cancel ボタンを押して ({{domxref("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 (ライブで表示) として見つけることができます。

仕様書

仕様書 状態 備考
{{SpecName('HTML WHATWG', "#htmlinputelement", "HTMLInputElement")}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '<dialog>')}} {{Spec2('HTML5.1')}} 初回定義

ブラウザーの互換性

{{Compat("api.HTMLDialogElement")}}

関連情報