MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

HTMLDialogElement

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

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

プロパティ

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

名前 説明
open Boolean ダイアログが相互利用可能であることを示すopen HTML属性を反映させます。
returnValue DOMString ダイアログの戻り値を設定/取得します。

メソッド

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

名前 & 引数 戻り値 説明
close() HTML5 void ダイアログを閉じます。オプションのDOMString を引数として渡すことができ、ダイアログのreturnValueを更新します。
show() HTML5 void モードレスにダイアログを表示します。この時、ダイアログの外側の要素と相互利用できます 。ダイアログを固定されたアンカーポイントとして指定するために、オプションのElementMouseEvent を引数として渡すことができます。
showModal() HTML5 void
存在するかもしれないそのほかのダイアログ上で、排他的な操作ができるダイアログを表示ます。ダイアログを固定されたアンカーポイントとして指定するために、オプションのElementMouseEvent を引数として渡すことができます。

例 1

<!-- Anchor point example -->
<dialog id="bronteDialog">
  <p>That was part of a poem by Emily Brontë!</p>
</dialog>

<blockquote>
  <p>"Then art thou glad to seek repose?<br>
  Art glad to leave the sea,<br>
  And <strong id="anchor">anchor</strong> all thy weary woes<br>
  In calm Eternity?"</p>
</blockquote>

<menu>
  <button id="showDialogButton">Show dialog</button>
</menu>

<script>
  (function() {
    var showDialogButton = document.getElementById('showDialogButton');

    // 'Show dialog' button opens dialog, anchored at third line of quote
    showDialogButton.addEventListener('click', function() {
      var bronteDialog = document.getElementById('bronteDialog');
      var anchorPoint = document.getElementById('anchor');
      bronteDialog.show(anchorPoint);
    });

  })();
</script>

例 2

<!-- 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');

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

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

  })();
</script>

仕様

仕様 状態 コメント
WHATWG HTML Living Standard
The definition of '<dialog>' in that specification.
Living Standard  
HTML5.1
The definition of '<dialog>' in that specification.
草案  

ブラウザ実装状況

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 37 未サポート バグ 840640 未サポート 24 未サポート
Anchor points 未サポート 未サポート 未サポート 未サポート 未サポート
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 未サポート 未サポート 未サポート 未サポート 未サポート
Anchor points 未サポート 未サポート 未サポート 未サポート 未サポート

関連項目

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

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

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