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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
---
title: '<dialog>: ダイアログ要素'
slug: Web/HTML/Element/dialog
tags:
- Dialog
- Experimental
- HTML
- HTML 対話操作
- 'HTML:フローコンテンツ'
- 'HTML:区分化ルート'
- Reference
- ウェブ
- ダイアログ
- 要素
translation_of: Web/HTML/Element/dialog
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML の <code><dialog></code> 要素</strong>は、ダイアログボックスや、消すことができるアラート、インスペクター、サブウィンドウ等のような対話的コンポーネントを表します。</span></p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">区分化ルート</a></td>
</tr>
<tr>
<th scope="row">許可された内容</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td>
</tr>
<tr>
<th scope="row">タグの省略</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">許可された親要素</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるあらゆる要素</td>
</tr>
<tr>
<th scope="row">暗黙の ARIA ロール</th>
<td><a href="/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role">dialog</a></td>
</tr>
<tr>
<th scope="row">許可された ARIA ロール</th>
<td>{{ARIARole("alertdialog")}}</td>
</tr>
<tr>
<th scope="row">DOM インターフェイス</th>
<td>{{domxref("HTMLDialogElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p>
<div class="blockIndicator warning">
<p><code>tabindex</code> 属性を <code><dialog></code> 要素で使用してはいけません。</p>
</div>
<dl>
<dt>{{htmlattrdef("open")}}</dt>
<dd>ダイアログがアクティブで操作で使用できることを示します。 <code>open</code> 属性が設定されていないときは、ダイアログはユーザーに表示する<em>べきではありません</em>。</dd>
</dl>
<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
<ul>
<li>{{HTMLElement("form")}} 要素は <code>method="dialog"</code> 属性が指定されていれば、ダイアログを閉じることができます。そのようなフォームが送信されると、 {{domxref("HTMLDialogElement.returnValue", "returnValue")}} プロパティがフォーム送信するために使用されたボタンの <code>value</code> に設定されて、ダイアログが閉じられます。</li>
<li>CSS の {{cssxref('::backdrop')}} 擬似要素を使用して、 <code><dialog></code> 要素が {{domxref("HTMLDialogElement.showModal()")}} で表示されたときの背後のスタイルを設定することができます。例えば、モーダルダイアログの背後にある操作できないコンテンツを暗くするなどです。</li>
</ul>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Simple_example" name="Simple_example">シンプルな例</h3>
<pre class="brush: html"><dialog open>
<p>Greetings, one and all!</p>
</dialog>
</pre>
<h3 id="Advanced_example" name="Advanced_example">応用的な例</h3>
<p>この例では、 "Update details" ボタンをクリックすると、フォームを含むポップアップダイアログボックスが開きます。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: 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>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">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();
});</pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{EmbedLiveSample("Advanced_example", "100%", 300)}}</p>
<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', 'forms.html#the-dialog-element', '<dialog>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}}</td>
<td>{{Spec2('HTML5.2')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("html.elements.dialog")}}</p>
<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
<p><code><dialog></code> 要素のないブラウザーには、このポリフィルを含めてください。</p>
<p><a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a></p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{domxref("HTMLDialogElement/close_event", "close")}} イベント</li>
<li>{{domxref("HTMLDialogElement/cancel_event", "cancel")}} イベント</li>
<li><a href="/ja/docs/Web/Guide/HTML/Forms">HTML フォームガイド</a></li>
<li>{{cssxref("::backdrop")}} 擬似要素</li>
</ul>
|
