html5 dialog使用详解-木庄网络博客

本文摘自PHP中文网，作者小云云，侵删。

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;