浅谈HTML5中dialog元素尝鲜（html5article元素）

25-03-03 10

如果您想了解浅谈HTML5中dialog元素尝鲜的相关知识，那么本文是一篇不可错过的文章，我们将对html5article元素进行全面详尽的解释，并且为您提供关于CDialog0dialog(dial

如果您想了解浅谈HTML5中dialog元素尝鲜的相关知识，那么本文是一篇不可错过的文章，我们将对html5article元素进行全面详尽的解释，并且为您提供关于CDialog0 dialog(dialogs.get_Item(Excel::xlDialog)、Chromium 新的弹窗机制以及 HTML 的

元素、html5 dialog使用详解、HTML5 dialog元素生成模态弹出窗口的有价值的信息。

本文目录一览：

浅谈HTML5中dialog元素尝鲜（html5article元素）
CDialog0 dialog(dialogs.get_Item(Excel::xlDialog)
Chromium 新的弹窗机制以及 HTML 的元素
html5 dialog使用详解
HTML5 dialog元素生成模态弹出窗口

浅谈HTML5中dialog元素尝鲜（html5article元素）

对话框（别称模态框，浮层）是web项目中用于用户交互的重要部分，我们最常见的就是js中 alert()，confirm()，但是这个对话框的不美观，也不能自定义样式，所以在开发的过程中，一般根据自己自己的需求造轮子或者使用第三方的。对话框的组成常见的弹出框形式：位置：屏幕的左上角，右上角，左下角，右下角，垂直居中等大小：定宽定高，定宽不定高，不定宽不定高等开发中的对话框形式就是位置和大小随机组合的一种情况。但是有一种情况（不定宽高的垂直居中）不易实现（可以使用display:table或css3的translate或flex实现），具体可参考水平垂直居中布局上面的对话框包含内容的容器，还有一个是对话框下面的遮罩层（mask），遮罩层是用户触发弹出框后，形成的一个对话框与页面主体的分割图层，它的存在可以给用户一个更明显的视觉差效果，同时也起到避免用户触发对话框后的其他不必要的页面主体操作，从而产生更有的用户体验。存在问题虽然，有很多对话框的轮子供我们选择，但是我们面临着各种各样的问题。到底选择哪一种对话框（对于有选择综合症的人来说一个头疼的问题）可用性（api的简单与否，是否依赖了其他第三方的库）可扩展性浏览器的兼容性支持那么，有没有一个简单的方法来做做一个对话框呢？当然有，我们可以使用HTML5的 dialog 元素。 HTML5(dialog)

CDialog0 dialog(dialogs.get_Item(Excel::xlDialog)

Application.Dialogs (xlDialogOpen).Show 显示 “文件” 菜单的 “打开” 对话框

Dialogs 的参数列表：

名称	值	说明
xlDialogActivate	103	激活对话框
xlDialogActiveCellFont	476	活动单元格字体对话框
xlDialogAddChartAutoformat	390	添加图表自动套用格式对话框
xlDialogAddinManager	321	外接程序管理器对话框
xlDialogAlignment	43	对齐方式对话框
xlDialogApplyNames	133	应用名称对话框
xlDialogApplyStyle	212	应用样式对话框
xlDialogAppMove	170	AppMove 对话框
xlDialogAppSize	171	AppSize 对话框
xlDialogArrangeAll	12	排列所有对话框
xlDialogAssignToObject	213	分配对象对话框
xlDialogAssignToTool	293	分配工具对话框
xlDialogAttachText	80	附加文本对话框中
xlDialogAttachToolbars	323	附加工具栏对话框
xlDialogAutoCorrect	485	自动校正对话框
xlDialogAxes	78	轴对话框
xlDialogBorder	45	边框对话框
xlDialogCalculation	32	计算对话框
xlDialogCellProtection	46	单元格保护对话框
xlDialogChangeLink	166	更改链接对话框
xlDialogChartAddData	392	图表中添加数据对话框
xlDialogChartLocation	527	图表位置对话框
xlDialogChartOptionsDataLabelMultiple	724	图表选项数据标签多个对话框
xlDialogChartOptionsDataLabels	505	图表选项数据标签对话框中
xlDialogChartOptionsDataTable	506	图表选项数据表对话框
xlDialogChartSourceData	540	图表源数据对话框
xlDialogChartTrend	350	图表趋势对话框
xlDialogChartType	526	图表类型对话框
xlDialogChartWizard	288	图表向导对话框
xlDialogCheckboxProperties	435	复选框属性对话框
xlDialogClear	52	清除对话框中
xlDialogColorPalette	161	调色板颜色对话框
xlDialogColumnWidth	47	列宽对话框
xlDialogCombination	73	组合对话框
xlDialogConditionalFormatting	583	条件格式对话框
xlDialogConsolidate	191	整合对话框
xlDialogCopyChart	147	复制图表对话框
xlDialogCopyPicture	108	将图片复制对话框中
xlDialogCreateList	796	创建列表对话框中
xlDialogCreateNames	62	创建名称对话框
xlDialogCreatePublisher	217	创建发布服务器对话框
xlDialogCustomizeToolbar	276	自定义工具栏对话框
xlDialogCustomViews	493	自定义视图对话框
xlDialogDataDelete	36	数据删除对话框
xlDialogDataLabel	379	数据标签对话框中
xlDialogDataLabelMultiple	723	数据标签多个对话框
xlDialogDataSeries	40	数据系列对话框
xlDialogDataValidation	525	数据验证对话框
xlDialogDefineName	61	定义名称对话框
xlDialogDefineStyle	229	定义样式对话框
xlDialogDeleteFormat	111	删除格式对话框
xlDialogDeleteName	110	删除名称对话框
xlDialogDemote	203	降级对话框
xlDialogDisplay	27	显示对话框
xlDialogDocumentInspector	862	文档检查器对话框
xlDialogEditboxProperties	438	编辑框属性对话框
xlDialogEditColor	223	编辑颜色对话框
xlDialogEditDelete	54	编辑删除对话框
xlDialogEditionOptions	251	编辑选项对话框
xlDialogEditSeries	228	编辑序列对话框
xlDialogErrorbarX	463	误差线 X 对话框
xlDialogErrorbarY	464	误差线 Y 对话框
xlDialogErrorChecking	732	错误检查对话框
xlDialogEvaluateFormula	709	公式求值对话框
xlDialogExternalDataProperties	530	外部数据属性对话框
xlDialogExtract	35	提取对话框
xlDialogFileDelete	6	文件删除对话框
xlDialogFileSharing	481	文件共享对话框
xlDialogFillGroup	200	填充组对话框
xlDialogFillWorkgroup	301	对话框中填充工作组
xlDialogFilter	447	对话框筛选程序对话框
xlDialogFilterAdvanced	370	高级筛选对话框中
xlDialogFindFile	475	查找文件对话框
xlDialogFont	26	字体对话框
xlDialogFontProperties	381	字体属性对话框
xlDialogFormatAuto	269	自动套用格式对话框
xlDialogFormatChart	465	设置图表格式对话框
xlDialogFormatCharttype	423	图表类型格式对话框
xlDialogFormatFont	150	设置字体格式对话框
xlDialogFormatLegend	88	图例格式对话框
xlDialogFormatMain	225	主要格式对话框
xlDialogFormatMove	128	移动格式对话框
xlDialogFormatNumber	42	设置数字格式对话框
xlDialogFormatOverlay	226	设置重叠格式对话框
xlDialogFormatSize	129	格式大小对话框
xlDialogFormatText	89	将文本格式设置对话框
xlDialogFormulaFind	64	公式查找对话框
xlDialogFormulaGoto	63	公式转到对话框
xlDialogFormulaReplace	130	公式替换对话框
xlDialogFunctionWizard	450	函数向导对话框
xlDialogGallery3dArea	193	库 3D 区域对话框
xlDialogGallery3dBar	272	三维条形图库对话框
xlDialogGallery3dColumn	194	三维柱形图库对话框
xlDialogGallery3dLine	195	三维折线图库对话框
xlDialogGallery3dPie	196	三维饼图库对话框
xlDialogGallery3dSurface	273	库 3D 曲面对话框
xlDialogGalleryArea	67	库面积对话框
xlDialogGalleryBar	68	条形图库对话框
xlDialogGalleryColumn	69	库列对话框
xlDialogGalleryCustom	388	自定义库对话框
xlDialogGalleryDoughnut	344	圆环库对话框
xlDialogGalleryLine	70	折线图库对话框
xlDialogGalleryPie	71	饼图库对话框
xlDialogGalleryRadar	249	雷达图库对话框
xlDialogGalleryScatter	72	散点图库对话框
xlDialogGoalSeek	198	单变量求解对话框中
xlDialogGridlines	76	设置网格对话框
xlDialogImportTextFile	666	导入文本文件对话框
xlDialogInsert	55	插入对话框
xlDialogInsertHyperlink	596	插入超链接对话框
xlDialogInsertObject	259	插入对象对话框
xlDialogInsertPicture	342	插入图片对话框中
xlDialogInsertTitle	380	插入标题对话框
xlDialogLabelProperties	436	标签属性对话框
xlDialogListboxProperties	437	列表框属性对话框中
xlDialogMacroOptions	382	宏选项对话框
xlDialogMailEditMailer	470	编辑邮件的邮件程序对话框
xlDialogMailLogon	339	邮件登录对话框
xlDialogMailNextLetter	378	发送下一信函对话框
xlDialogMainChart	85	主图表对话框
xlDialogMainChartType	185	主图表类型对话框
xlDialogMenuEditor	322	菜单编辑器对话框
xlDialogMove	262	移动对话框中
xlDialogMyPermission	834	我的权限对话框中
xlDialogNameManager	977	NameManager 对话框
xlDialogNew	119	新建对话框
xlDialogNewName	978	新名称对话框
xlDialogNewWebQuery	667	新的 Web 查询对话框
xlDialogNote	154	注意对话框
xlDialogObjectProperties	207	对象属性对话框
xlDialogObjectProtection	214	保护对象对话框
xlDialogOpen	1	打开对话框
xlDialogOpenLinks	2	打开链接对话框
xlDialogOpenMail	188	打开邮件对话框
xlDialogOpenText	441	打开文本对话框中
xlDialogOptionsCalculation	318	计算选项对话框
xlDialogOptionsChart	325	图表选项对话框
xlDialogOptionsEdit	319	编辑选项对话框
xlDialogOptionsGeneral	356	常规选项对话框
xlDialogOptionsListsAdd	458	添加列表选项对话框
xlDialogOptionsME	647	Me 选项对话框
xlDialogOptionsTransition	355	转换选项对话框
xlDialogOptionsView	320	视图选项对话框
xlDialogOutline	142	分级显示对话框
xlDialogOverlay	86	覆盖对话框
xlDialogOverlayChartType	186	覆盖图图表类型对话框
xlDialogPageSetup	7	页面设置对话框
xlDialogParse	91	分析对话框
xlDialogPasteNames	58	粘贴名称对话框
xlDialogPasteSpecial	53	选择性粘贴对话框中
xlDialogPatterns	84	模式对话框
xlDialogPermission	832	权限对话框中
xlDialogPhonetic	656	Phonetic 对话框
xlDialogPivotCalculatedField	570	数据透视表计算字段对话框
xlDialogPivotCalculatedItem	572	数据透视表计算数据项对话框
xlDialogPivotClientServerSet	689	数据透视表客户端服务器设置对话框
xlDialogPivotFieldGroup	433	组合数据透视表字段对话框
xlDialogPivotFieldProperties	313	数据透视表字段属性对话框
xlDialogPivotFieldUngroup	434	取消组合数据透视表字段对话框
xlDialogPivotShowPages	421	数据透视表显示页对话框
xlDialogPivotSolveOrder	568	数据透视表求解次序对话框
xlDialogPivotTableOptions	567	数据透视表选项对话框
xlDialogPivotTableSlicerConnections	1183	数据透视表切片器连接对话框
xlDialogPivotTableWhatIfAnalysisSettings	1153	数据透视表 What If 分析设置对话框
xlDialogPivotTableWizard	312	数据透视表向导对话框
xlDialogPlacement	300	放置对话框
xlDialogPrint	8	打印对话框
xlDialogPrinterSetup	9	打印机设置对话框
xlDialogPrintPreview	222	打印预览对话框
xlDialogPromote	202	提升对话框
xlDialogProperties	474	属性对话框
xlDialogPropertyFields	754	属性字段对话框
xlDialogProtectDocument	28	保护文档对话框
xlDialogProtectSharing	620	保护共享对话框
xlDialogPublishAsWebPage	653	发布为网页对话框
xlDialogPushbuttonProperties	445	可通过按钮属性对话框
xlDialogReplaceFont	134	替换字体对话框
xlDialogRoutingSlip	336	已否决该对象或成员，但它仍保留向后兼容性的对象模型的一部分。在新的应用程序中），不应使用它。
xlDialogRowHeight	127	行高对话框
xlDialogRun	17	运行对话框
xlDialogSaveAs	5	另存为对话框中
xlDialogSaveCopyAs	456	副本另存为对话框中
xlDialogSaveNewObject	208	保存新对象对话框中
xlDialogSaveWorkbook	145	保存工作簿对话框中
xlDialogSaveWorkspace	285	保存工作区对话框
xlDialogScale	87	缩放对话框
xlDialogScenarioAdd	307	方案中添加对话框
xlDialogScenarioCells	305	方案单元对话框
xlDialogScenarioEdit	308	方案编辑对话框中
xlDialogScenarioMerge	473	方案合并对话框
xlDialogScenarioSummary	311	方案摘要对话框
xlDialogScrollbarProperties	420	滚动条属性对话框
xlDialogSearch	731	搜索对话框
xlDialogSelectSpecial	132	特殊选择对话框中
xlDialogSendMail	189	发送邮件对话框
xlDialogSeriesAxes	460	系列轴对话框
xlDialogSeriesOptions	557	系列选项对话框
xlDialogSeriesOrder	466	系列次序对话框
xlDialogSeriesShape	504	系列形状对话框
xlDialogSeriesX	461	X 轴系列对话框
xlDialogSeriesY	462	Y 轴系列对话框
xlDialogSetBackgroundPicture	509	将背景图片设置对话框
xlDialogSetManager	1109	设置管理器对话框
xlDialogSetMDXEditor	1208	集 MDX 编辑器对话框
xlDialogSetPrintTitles	23	对话框中设置打印标题
xlDialogSetTupleEditorOnColumns	1108	对列集元组编辑器对话框
xlDialogSetTupleEditorOnRows	1107	在行集元组编辑器对话框
xlDialogSetUpdateStatus	159	设置更新状态对话框
xlDialogShowDetail	204	显示详细信息对话框
xlDialogShowToolbar	220	显示工具栏对话框
xlDialogSize	261	大小对话框
xlDialogSlicerCreation	1182	切片器创建对话框
xlDialogSlicerPivotTableConnections	1184	切片器数据透视表连接对话框
xlDialogSlicerSettings	1179	切片器设置对话框
xlDialogSort	39	排序对话框
xlDialogSortSpecial	192	选择性排序的对话框
xlDialogSparklineInsertColumn	1134	迷你插入列对话框
xlDialogSparklineInsertLine	1133	迷你插入行对话框
xlDialogSparklineInsertWinLoss	1135	迷你插入得失分析对话框
xlDialogSplit	137	拆分对话框
xlDialogStandardFont	190	标准字体对话框
xlDialogStandardWidth	472	标准列宽对话框
xlDialogStyle	44	样式对话框
xlDialogSubscribeTo	218	订阅复制到对话框中
xlDialogSubtotalCreate	398	创建分类汇总对话框
xlDialogSummaryInfo	474	摘要信息对话框
xlDialogTable	41	表对话框
xlDialogTabOrder	394	Tab 键顺序的对话框
xlDialogTextToColumns	422	文本列对话框
xlDialogUnhide	94	取消隐藏对话框
xlDialogUpdateLink	201	更新链接对话框
xlDialogVbaInsertFile	328	VBA 插入文件对话框中
xlDialogVbaMakeAddin	478	VBA 将外接程序对话框
xlDialogVbaProcedureDefinition	330	VBA 过程定义对话框
xlDialogView3d	197	三维视图对话框
xlDialogWebOptionsBrowsers	773	Web 浏览器选项对话框
xlDialogWebOptionsEncoding	686	编码 web 选项对话框
xlDialogWebOptionsFiles	684	Web 选项文件对话框
xlDialogWebOptionsFonts	687	Web 选项字体对话框
xlDialogWebOptionsGeneral	683	常规 web 选项对话框
xlDialogWebOptionsPictures	685	Web 选项图片对话框
xlDialogWindowMove	14	移动窗口对话框
xlDialogWindowSize	13	窗口大小对话框
xlDialogWorkbookAdd	281	工作簿中添加对话框
xlDialogWorkbookCopy	283	工作簿复制对话框中
xlDialogWorkbookInsert	354	工作簿插入对话框
xlDialogWorkbookMove	282	将工作簿移动对话框
xlDialogWorkbookName	386	工作簿名称对话框
xlDialogWorkbookNew	302	新工作簿的对话框
xlDialogWorkbookOptions	284	工作簿选项对话框
xlDialogWorkbookProtect	417	保护工作簿对话框中
xlDialogWorkbookTabSplit	415	拆分工作簿标签对话框中
xlDialogWorkbookUnhide	384	取消隐藏工作簿对话框
xlDialogWorkgroup	199	工作组对话框
xlDialogWorkspace	95	工作区对话框
xlDialogZoom	256	缩放对话框

Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素

Chromium 新的弹窗机制以及 HTML 的元素

自 1995 年 JavaScript 诞生之初，就包含了 3 个方法 alert()、confirm() 和 prompt()。在随后的 Chrome 版本中，Chrome 团队一直在修改原生弹窗的表现。

但是这种阻断式的弹窗总被各种广告网站恶意使用，因为只要弹窗出现，JavaScript 引擎就会一直等待，知道用户操作。所以这种原生弹窗的最大用处不是用来提示用户信息，而是伤害用户(Tech support scammers use subdomain trick to defeat blocking)。

因此 Chromium 团队强烈建议你不要使用这类弹窗。

而弹窗和 onbeforeunload 事件相结合之后那简直就是大杀器，而此类弹窗经常被用来提示浏览者xxxx。

Chromium 团队在 Chrome 51 中移除了对 onbeforeunload 弹窗的支持。在此之前 Safari 9.1 和 Firefox 4 早就已经移除了。当我们在 onbeforeunload 事件中调用 alert 时，会在 devtools 中产生警告：

Blocked alert(''before unload'') during beforeunload.

除此之外，alert()、confirm()、prompt() 的行为也做了改变，不再作为顶级的原生弹窗而存在，当弹窗所在的浏览器标签被切走后，它们会自动消失。(Safari 9.1 说：“你怎么到现在才来学啊！”)

Chromium 在官方博客中说到：

对于 alert()/confirm()/prompt() 我们有很多替代的选择。譬如需要弹个通知消息时（日历应用）可以用Notifications API。获取用户输入可以用 HTML 中的 <dialog> 元素。对于 XSS proofs-of-concept 则可用 console.log(document.origin)。

<dialog> 作为 HTML 5.2 的元素，目前除了 Chrome 和 Opara 以外，其它浏览器均未支持。但是 Google 提供了一个 dialog-polyfill。

一个最简单的例子：

<dialog>This is da dialog!</dialog>

这段 html 什么也不显示，开发者需要使用 javascript 的 API .show() 和 .close() 来控制 dialog 的显示和隐藏。

<dialog>
  <p>This is da dialog!</p>
  <button id="close">Close</button>
</dialog>

<button id="show">Open Dialog!</button>

var dialog = document.querySelector(''dialog'');

document.querySelector(''#show'').onclick = function() {
  dialog.show();
};

document.querySelector(''#close'').onclick = function() {
  dialog.close();
};

https://jsfiddle.net/m1dzstxo/

点击按钮会出现一个弹窗（非常丑）

不过 dialog 作为一个 html 标签，是可以使用 css 的。我们给它加一段 css 样式：

dialog {
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

https://jsfiddle.net/m1dzstxo/1/

再点击按钮，弹窗了一个稍微漂亮点的弹窗：

我们还可以使用 .showModal() 弹窗一个模态对话框，当我们关闭弹窗时触发 close 事件。我们还可以使用 ESC 键关闭一个弹窗，此时会触发 cancel 事件。和其它所有事件一样，我们可以通过调用 event.preventDefault() 来阻止默认行为。

直接弹窗一个模态窗口是不够友好的，有时我们需要把背景虚化：

通过使用 CSS 的伪元素 ::backdrop 很容易就可以做到：

dialog::backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

为什么使用 <dialog> 元素而不是第三方的 javascript 库？

我觉得两者并不冲突，目前大部分 javascript 库都是使用 <div> 来模拟弹窗，当更多的浏览器开始支持 <dialog> 时，第三方的 javascript 库也会考虑使用 <dialog> 作为首先的弹窗方式的，毕竟 <dialog> 是 HTML 5.2 规范中的。

相比 <div> 而言，<dialog> 更大强大，也更加符合规范。比如 <dialog> 的模态弹窗可以保证即使全屏的情况下，弹窗可以保持在最顶层(top-layer)。top-layer 定义在 whatwg 的 Fullscreen API 中，可以配合伪元素 ::backdrop 以及伪类 :fullscreen 一起使用。

开发面向未来的前端，当有 polyfill 方案时，我们应该总是使用最新标准。

html5 dialog使用详解

1. 写在前面

说起 dialog 标签，可能很多人都比较陌生，毕竟这个标签直到 HTML5.2 标准固定，也只是 chrome 的浏览器才支持的，那至于该标签的用处，根据语义也可以很明显的理解到，会话。

这里我们可能会想到的是， alert ， confirm 等弹窗，是的，它们是同一个家族的，都是弹出框，接下来我们就简单的看看， dialog 标签的一些属性与使用场景。

2. 标签使用

<dialog open=>      
 <h2>Title</h2>    
 <p>Content</p>
</dialog>

既然是标签，那么其实与我们常用的 p ， p 等标签一样，如上面的示例代码所示，其内部支持任意的其他元素。

这里，你可能会注意到，在上面的示例代码中的 open 属性，是的，这个是用来控制这个弹窗的显示和隐藏的，当然，你也可以任性的使用 css 来控制，只是那样在一些设备的辅助功能时（比如无障碍访问，读屏软件等），就会出现异常了，所以建议还是使用标准中的显示与隐藏功能。

3. 支持的默认方法

首先， dialog 标签是 HTMLDialogElement 的一个示例，继承自 HTMLElement ，所以，它与p这一的标签是属于同层次的标签，唯一不同的是，它比p有更多的默认功能，这一小节，我们就来看看， dialog 有哪些默认的方法供我们使用。

var dialog = document.getElementById(dialog);
// 假设页面中，有一个id=dialog的dialog标签

// 关闭dialog
dialog.close();

// 以toast的形式显示dialog
dialog.show();

// 以模态框的形式显示dialog
dialog.showModal();

// dialog.close()调用时传入的参数值
dialog.returnVlaue;

// dialog的显示状态
dialog.open;

你可以自己先去示例中，操作一下，然后看看有哪些特色，然后再回来对比一下，接下来的总结：

1： close 方法，可以多次被调用，即便是隐藏状态，也可以再次被调用。

2： close 可以传入一个变量，这个变量必须是字符串，在 returnVlaue 中表现。

3： show 方法，也可以多次被调用，即便在隐藏状态，不会有任何问题。

4： show 方法，不会更改 toast 的位置，弹出框原本在什么位置， show 方法调用之后，依然在原有的位置。

5： show 方法，显示位置紧挨着前一个元素后面，居中，没有背后的遮罩层， z-index 的显示方式与 relative 不设置 z-index 的类似（如果在此之前，没有调用过 showModal 的话）。

6：如果调用过 showModal 后，那么 show 方法后，元素显示在 showModal 显示的位置，不会变动（即便内容高度变化了很多）。

7：如果有两个 dialog 元素，都调用 show 方法，在 html 结构中，后面的 dialog 会永远覆盖在前面的那个上层（不管那个 dialog 先调用了 show 方法）。

8： showModal 的显示，背后会有遮罩层，显示层级是浏览器 webview 级别的，怎么理解呢，你可以设置一个元素，级别非常高，在使用 showModal 显示出 dialog 属性后， dialog 都是在最前面的，这一点特别适合做模态框，肯定不会在弹出框出现之后，出现层级混乱的情况。

9： showModal 只能调用一次，这里的一次是说，如果 dialog 在显示状态，那么在再次调用 showModal ，就会报错，并且不能直接执行，或者说，只要 open 属性存在的情况下，再次调用，都会报错，所以还是使用默认的 open 属性来做 dialog 的显示隐藏更好。

10：如果页面上有两个 dialog 元素，都在调用 showModal 方法的话，不论他们在 HTML 中的结构，后调用的 dialog 的层级会高于之前调用的 dialog 的层级。

11： dialog.returnVlaue 的取值，是 dialog.close(string) 调用时传入的值，只支持字符串，只有在 dialog 的显示的情况下，调用 dialog.close 传入的值，才有效。

12：如果一直没有在 close 中传值，那么 returnVlaue 的值为空，如果某次传值 dialog.close(1) ，再下次 show 之后， dialog.close() 关闭， returnVlaue 依然等于“1”。

13： open 的返回值是： true/false 。

4. 支持的默认事件

dialog 还有一个好处就是，它支持出 click 等基础事件之外的，额外两个针对于 dialog 的特殊事件：

var dialog = document.getElementById(dialog);
// 假设页面中，有一个id=dialog的dialog标签

// 当调用close方法时
dialog.onclose = function(){};

// 当在pc端按下esc按键时。不过在chrome版本之后，好像不管用了。
dialog.oncancel = function(){};

现在来看一个示例： dialog 事件示例展示。

也有几个问题，这里来列举一下：

1：只要调用 dialog.close() 来隐藏的 dialog ，才能触发 onclose 事件。

2： cancel 事件触发之后，必定会继续触发 close 事件， chrome64 版本之后， cancel 的触发，不是 esc 按键了。

3：如果有多种关闭 dialog 的按钮，那么在每次调用 close 的时候传入不同的值，在 close 事件的回调里面，使用 returnVlaue 的取值，来判断，是哪个按钮用来触发的关闭事件。

5. 其他

前面把 dialog 的一些表现进了说明，可能有不全，不准确的情况，也可能随着时间的推移，有更新的特性出现，欢迎提出补充。

在看前面的示例时，我们也看到了一下不足的地方，比如：样式特别丑，关于这点，我们可以完全使用CSS把样式reset掉，不影响语义，和其他的任何东西，放心重构就可以了。

这里只是想说一下， dialog 的表现，所以就不做这些了。

6. 总结

dialog 毕竟属于弹窗对话的语义化标签，并且有一些独有的优势（比如 webview 层级的高度），虽然现在只是chrome支持，但对于以后的使用，依然是很看好的，甚至现在也可以自己兼容一下，在其他浏览器，自己去实现一套 dialog 的机制（也许已经有这套实现方案了，这里就不去找了）。