CSS Popover API 弹出层

CSS Popover API：popover属性（auto/manual）/popovertarget触发/showPopover()/hidePopover()/togglePopover()、::backdrop伪元素、原生无JS弹出层、比dialog更适合悬浮层 · 难度：入门 · +10XP

CSS Popover API —— 原生弹出层，不用JS

做悬浮提示、下拉菜单、弹出面板时，以前都要用JS控制显示隐藏。CSS Popover API提供了原生的弹出层能力。

基本用法

<button popovertarget="myPopover">点击我</button>
<div id="myPopover" popover>
  这是一个弹出层！点击外部自动关闭。
</div>

两种popover模式

用CSS美化

[popover] {
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
[popover]::backdrop {
  background: rgba(0,0,0,0.3);  /* 遮罩 */
}

动手练习

1. 基础练习：做一个悬浮提示按钮——鼠标悬停弹出提示信息。
2. 进阶应用：做一个下拉菜单——点击按钮弹出菜单，点击菜单项或空白处关闭。
3. 项目实战：把项目中用JS实现的tooltip和dropdown替换为原生popover。