diff options
Diffstat (limited to 'files/zh-cn/web/html/element/dialog/index.html')
| -rw-r--r-- | files/zh-cn/web/html/element/dialog/index.html | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/files/zh-cn/web/html/element/dialog/index.html b/files/zh-cn/web/html/element/dialog/index.html new file mode 100644 index 0000000000..0b9ffdfd91 --- /dev/null +++ b/files/zh-cn/web/html/element/dialog/index.html @@ -0,0 +1,179 @@ +--- +title: <dialog> +slug: Web/HTML/Element/dialog +tags: + - Dialog + - HTML + - 元素 + - 参考 + - 可交互 +translation_of: Web/HTML/Element/dialog +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><dialog></code> 元素</strong>表示一个对话框或其他交互式组件，例如一个检查器或者窗口。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">sectioning root</a></td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a></td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("alertdialog")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLDialogElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素包含了<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。但是 <code>tabindex</code> 特性不能被使用在 <code><dialog></code> 元素上。</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>指示这个对话框是激活的和能互动的。当这个 <code>open</code> 特性没有被设置，对话框不应该显示给用户。</dd> +</dl> + +<h2 id="使用备注">使用备注</h2> + +<ul> + <li><code><form></code> 元素可在此对话框中使用，但需要指定属性 <code>method="dialog"</code> 。当提交表单时，对话框的 {{domxref("HTMLDialogElement.returnValue", "returnValue")}} 属性将会等于表单中被使用的提交按钮的 <code>value</code> 。</li> + <li> {{cssxref('::backdrop')}} CSS 伪元素可用于更改 <code><dialog></code> 背景元素样式，例如在对话框被打开激活时，调暗背景中不可访问的内容。仅当使用 {{domxref("HTMLDialogElement.showModal()")}} 显示对话框时才会绘制 backdrop 背景。</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<h3 id="简单的例子">简单的例子</h3> + +<pre class="brush: html"><dialog open> + <p>Greetings, one and all!</p> +</dialog> +</pre> + +<h3 id="高级示例">高级示例</h3> + +<p>当单击“更新详细信息”按钮时，此示例打开一个包含一个表单的弹出对话框。</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">(function() { + var updateButton = document.getElementById('updateDetails'); + var favDialog = document.getElementById('favDialog'); + var outputBox = document.getElementsByTagName('output')[0]; + var selectEl = document.getElementsByTagName('select')[0]; + 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="结果">结果</h3> + +<p>{{EmbedLiveSample("Advanced_example", "100%", 300)}}</p> + +<p>Which button was clicked can be determined from <code>favDialog</code>’s {{domxref("HTMLDialogElement.returnValue", "returnValue")}}.</p> + +<h2 id="规范">规范</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>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.dialog")}}</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Include this polyfill to provide support for older browsers.</p> + +<p><a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a></p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{event("close")}} 事件</li> + <li>{{event("cancel")}} 事件</li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</li> + <li>{{cssxref("::backdrop")}} 伪元素</li> +</ul> |