MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

这篇翻译不完整。请帮忙从英语翻译这篇文章

HTML <dialog> 元素表示一个对话框或其他交互式组件,例如一个检查员或窗口。

Content categories Flow content, sectioning root
Permitted content Flow content
Tag omission 不允许,开始标签和结束标签都不能省略。
Permitted parents Any element that accepts flow content
Permitted ARIA roles alertdialog
DOM interface HTMLDialogElement

Attributes

This element includes the global attributes. The tabindex attribute must not be used on the <dialog> element.

open
Indicates that the dialog is active and available for interaction. When the open attribute is not set, it shouldn't be shown to the user.

Usage notes

  • <form> elements can be integrated within a dialog by specifying them with the attribute method="dialog". When such a form is submitted, the dialog is closed with a returnValue attribute set to the value of the submit button used.
  • The ::backdrop CSS pseudo-element can be used to style behind a <dialog> element, for example to dim inaccessible content whilst a modal dialog is active.

Examples

简单的例子

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

高级示例

当单击“更新详细信息”按钮时,此示例打开一个包含一个表单的弹出对话框。

HTML content

<!-- 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">
        <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>

JavaScript content

(function() {
  var updateButton = document.getElementById('updateDetails');
  var cancelButton = document.getElementById('cancel');
  var favDialog = document.getElementById('favDialog');

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

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

Result

Specifications

Specification Status Comment
WHATWG HTML Living Standard
<dialog>
Living Standard  
HTML5.1
<dialog>
Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 37 未实现[1] 未实现 24 未实现
Anchor points 未实现 未实现 未实现 未实现 未实现
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 37 未实现 未实现 未实现 未实现
Anchor points 未实现 未实现 未实现 未实现 未实现

[1] See bug 840640.

Polyfills

Include this polyfill to provide support for older browsers.  

dialog-polyfill

See also

文档标签和贡献者

 此页面的贡献者: xgqfrms-GitHub
 最后编辑者: xgqfrms-GitHub,