2017年12月24号， HTML5.2 标准固化，也代表着移动端进入 HTML5.3 规划阶段，虽然 HTML5.2 固化了，但内部的一些新规范，在移动端的浏览器中的支持性还有待提高，这里我们来看一个算是常用的新被纳入标准的标签吧，它就是 dialog 标签。
1. 写在前面
说起 dialog 标签，可能很多人都比较陌生，毕竟这个标签直到 HTML5.2 标准固定，也只是 chrome 的浏览器才支持的，那至于该标签的用处，根据语义也可以很明显的理解到，会话。
这里我们可能会想到的是， alert ， confirm 等弹窗，是的，它们是同一个家族的，都是弹出框，接下来我们就简单的看看， dialog 标签的一些属性与使用场景。
2. 标签使用
| <dialog open=""> <h2>Title</h2> <p>Content</p> </dialog> |
既然是标签，那么其实与我们常用的 div ， p 等标签一样，如上面的示例代码所示，其内部支持任意的其他元素。
这里，你可能会注意到，在上面的示例代码中的 open 属性，是的，这个是用来控制这个弹窗的显示和隐藏的，当然，你也可以任性的使用 css 来控制，只是那样在一些设备的辅助功能时（比如无障碍访问，读屏软件等），就会出现异常了，所以建议还是使用标准中的显示与隐藏功能。
3. 支持的默认方法
首先， dialog 标签是 HTMLDialogElement 的一个示例，继承自 HTMLElement ，所以，它与div这一的标签是属于同层次的标签，唯一不同的是，它比div有更多的默认功能，这一小节，我们就来看看， 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 显示的位置，不会变动（即便内容高度变化了很多）。
