html5 dialog弹窗的使用介绍

1. 写在前面

说到dialog标签，可能很多人都不熟悉。毕竟在html5.2标准确定之前，这个标签只有chrome浏览器支持。至于这个标签的用处，根据语义就可以很清楚的理解了。

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

2. 标签使用

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

既然是标签，其实和我们平时的p，div等标签是一样的。如上面的示例代码所示，它在内部支持任何其他元素。

这里，大家可能注意到了上面示例代码中的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. 其他

上面描述了对话框的一些表现，可能不完整和不准确，或者随着时间的推移可能会出现更新的功能。

在看前面的例子的时候，我们也看到了一些不足，比如：样式特别难看。关于这一点，我们完全可以在不影响语义的情况下使用CSS重新设置样式，其他任何东西，放心重构即可。这里只是想说一下， dialog 的表现，所以就不做这些了。

6. 总结

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

链接: https://fly63.com/article/detial/12344