版本：HTML5

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

浏览器支持

示例

 
greetings, one and all!

标签定义及使用说明

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

属性

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

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

HTML 4.01 与 HTML 5 之间的差异

标签是 HTML 5 中的新标签。

全局属性

标签支持HTML 的全局属性。

事件属性

标签支持HTML 的事件属性。

例子

 老师
  2+2 等于？
  学生
  4
  老师
  答对了！ 

使用元素：

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

//html 
favorite animal:
      
        
        brine shrimp
        red panda
        spider monkey 
 cancel
      confirm
    
  



  update details 

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