每个系列一本前端好书，帮你轻松学重点。

本系列来自阅文集团前端专家张鑫旭所编写的 《HTML并不简单》

上一篇我没聊过瘾，相信你也没看过瘾，这一篇接着聊。

就刻板印象来说，HTML是用于展示的，最多会联系上语义化、无障碍。

跟交互有什么关系，这不是JavaScript该做的事？

非也，HTML里有不少元素自带交互，你能想起哪些？input、select，就是表单嘛，还有？

当然，往下看。

details

这个单词很常用，见名知意，详情，但元素并不常用，按照语义来说，它可以用在展示不全内容的地方。

details通常和summary同时使用，一个概括，一个详情，看起来很合理。

所以，details的常规应用就是：

<details open>
    <summary>这是摘要summary>
    <p>这里是具体的描述，标签相对随意p>
details>

效果如图：

通过点击摘要的部分，可以展开和闭合详情，是不是很常见，也没想到会原生支持？

details是这个交互的核心，而summary是可以缺省的，如果没有，也可以通过切换open属性决定内容的显隐。

其中的p元素只是示例，可以根据需要，替换成其他元素。

最常见的使用场景就是悬浮菜单、多项菜单折叠、多级嵌套的树形效果等。

dialog

这个也很常见，通常我们创建对话框组件就会用这个名字，而它其实也是原生元素之一，专用来实现对话框。

<dialog open>
    <div>打开一个对话框div>
dialog>

它的内部没什么限制，能放任意HTML元素，同时，支持使用open属性或者dialog.open()方法打开。

但有一点要注意，它的默认打开位置不是屏幕中心，是靠近按钮的位置，需要改变位置得使用CSS进行设置。

说到这里，似乎dialog跟div没有区别，没有比它优势的地方，当然不。

form和自动关闭

通常，对话框出现后，会在某个时机被关闭，往往是点击一个按钮，通过JavaScript代码进行关闭，而dialog内置了一种特性，不使用JavaScript代码也能让对话框关闭。

<dialog>
    <p>描述文字p>
    <form method="dialog">
        <button>我知道了button>
    form>
dialog>

以上这段代码里，form元素设置了method属性，值为‘dialog’，这时候直接点击button即可实现对话框的关闭。

不过有一点要注意，就是button必须是submit性质的，不能是普通的type=‘button’或者type=‘reset’等，当然，还有一种方法，是给button设置formmethod="dialog"也能关闭弹窗。

关闭来源

这是个比较简单，但可以节省代码的特性，弹窗中常有多个按钮能关闭弹窗，如“确认”、“取消”，我们想知道用户点的是哪个，通常通过传参来判断，但也可以用另一种方法，直接给按钮设置value属性，然后用dialog.returnValue的值进行判断。

顶层特性

弹出框最尴尬的事情是什么？就是它被弹出的时候却发现页面上有别的元素比它层级更高，这个问题常用的解决方案是暴力设定z-index，给一个极大值来做保证。

如果使用原生dialog，这种做法也不必了，因为它有个showModal()方法，这个方法有点厉害，它能够让弹框自动获取焦点，且弹框外元素无法再获取焦点，同时，它的层级是最高的，无需任何CSS样式设置，此特性的英文名叫“top-layer”。

原生弹层

虽然dialog元素好用，但对于一些敏捷交互，还是略重，比如：点击按钮预览图片。

针对此类场景，一个全新的HTML属性就出现了—popover，不仅主流浏览器都支持，而且是一个全局属性，也就是说，它比dialog更加灵活，使用方法如下：

popovertarget="imagePopover">点击我
id="imagePopover">
    src="example.jpg" alt="">