<dialog>

版本：HTML5

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

浏览器支持

目前，只有 Chrome 和 Safari 6 支持<dialog>标签。

示例

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

标签定义及使用说明

• <dialog>标签定义一个对话框、确认框或窗口。
• <form>元素可在此对话框中使用，但需要指定属性method="dialog"。当提交表单时，对话框的returnValue属性将会等于表单中被使用的提交按钮的value。
• ::backdropCSS 伪元素可用于更改<dialog>背景元素样式，例如在对话框被打开激活时，调暗背景中不可访问的内容。仅当使用HTMLDialogElement.showModal()显示对话框时才会绘制backdrop 背景。

属性

这个元素包含了全局属性。但是tabindex特性不能被使用在<dialog>元素上。

• open指示这个对话框是激活的和能互动的。当这个open特性没有被设置，对话框不应该显示给用户。

HTML 4.01 与 HTML 5 之间的差异

<dialog>标签是 HTML 5 中的新标签。

全局属性

<dialog>标签支持HTML 的全局属性。

事件属性

<dialog>标签支持HTML 的事件属性。

例子

<dialog>
  <dt>老师</dt>
  <dd>2+2 等于？</dd>
  <dt>学生</dt>
  <dd>4</dd>
  <dt>老师</dt>
  <dd>答对了！</dd>
</dialog>

使用<dialog>元素：

<table border="1">
<tr>
<th>january <dialog open>this is an open dialog window</dialog></th>
<th>february</th>
<th>march</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>

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

//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>

JavaScript

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