目录 搜索
Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp
文字

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

内容类别

流量内容,切片根

允许的内容

流量内容

标记遗漏

没有,起始和结束标签都是强制性的。

允许父母

任何接受流内容的元素

允许ARIA角色

alertdialog

DOM界面

HTMLDialogElement

属性

这个元素包含全局属性。该tabindex属性不能在<dialog>元素上使用。

open表示该对话框处于活动状态并可用于交互。当open属性没有设置时,不应该向用户显示。

使用说明

  • <form>通过用属性指定元素,可以将元素集成到对话框中method="dialog"。当提交这样的表单时,对话框被关闭,其returnValue属性被设置为所value使用的提交按钮。

  • ::backdropCSS伪元素使用在<dialog>元素之后,例如, 在模式对话框处于活动状态时使无法访问的内容变暗。

示例

简单的例子

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

高级示例

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

HTML

<!-- Simple pop-up dialog box, containing a form --><dialog open 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

(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();  });})();

运行结果

规范

规范

状态

评论

HTML Living Standard该规范中'<dialog>'的定义。

生活水平


HTML 5.1该规范中'<dialog>'的定义。

建议

初始定义

浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

37

No support1

No support

24

No support

Feature

Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

37

No support

No support

No support

No support

上一篇: 下一篇: