html5dialog运用详解-
提及 dialog 标签，可能许多人都比拼生疏，究竟这个标签直到 HTML5.2 规范牢固，也只是 chrome 的阅读器才支撑的，那至于该标签的用场，依据语义也可以很显明的了解到，会话。
这里我们可能会想到的是， alert ， confirm 等弹窗，是的，它们是统一个家族的，都是弹出框，接下来我们就简略的看看， dialog 标签的一些属性与运用场景。
2. 标签运用
既然是标签，那么其实与我们常用的 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 的机制（或许已经有这套实现方案了，这里就不去寻了）。
