files/ja/web/api/htmldialogelement/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

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

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

<p>{{InheritanceDiagram(600, 80)}}</p>

<h2 id="Properties" name="Properties">プロパティ</h2>

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

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

<h2 id="Methods" name="Methods">メソッド</h2>

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

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

<h2 id="Events" name="Events">イベント</h2>

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

<h2 id="Examples" name="Examples">例</h2>

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

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

  &lt;menu&gt;
    &lt;button id="updateDetails"&gt;Update details&lt;/button&gt;
  &lt;/menu&gt;

  &lt;script&gt;
    (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);
      });

    })();
  &lt;/script&gt;</pre>

<div class="note">
<p><strong>メモ</strong>: この例は GitHub 上の <a href="https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html">htmldialogelement-basic</a> (<a href="https://mdn.github.io/dom-examples/htmldialogelement-basic/">ライブで表示</a>) として見つけることができます。</p>
</div>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', "#htmlinputelement", "HTMLInputElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("api.HTMLDialogElement")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>このインターフェイスを実装している HTML 要素: {{ HTMLElement("dialog") }}</li>
</ul>