popover是一个全局属性，给任意元素添加popover属性后，这个元素就会变成一个悬浮层，层级也会变成最高的，高于页面上的一切，不会被其他元素遮盖，例如全局loading，toast，卡片等场景需求，都可以用到
属性值有俩个：
-
auto:自动(默认值) 浏览器的默认行为，例如点击悬浮层以外的地方会关闭悬浮层，按键盘ESC也会关闭 -
manual:手动 没有默认行为，所有的操作必须由开发者手动操作
<div popover>我是悬浮层</div>
<div popover="auto">我是悬浮层</div>
<div popover="manual">我是悬浮层</div>
悬浮层默认是关闭隐藏的，也不能通过设置属性值显示，显示悬浮层的方式有声明式和命令式两种
- 第一种声明式
点击按钮显示悬浮层，注意必须是button按钮(popovertarget本身就是button元素的属性，别的元素没有这个属性)，别的元素不行，按钮元素需要添加popovertarget属性，属性值是悬浮层的id属性值(只能是id)
<button popovertarget="pop">显示悬浮层</button>
<div id="pop" popover>我是悬浮层</div>
设置一下悬浮层的位置样式
#pop{
background:rgba(0,0,0,0.5);
color:#fff;
font-size: 14px;
text-align: center;
width: 100px;
height: 100px;
line-height: 100px;
margin: auto;
}
效果如图所示
声明式第一种
- 第二种声明式
按钮元素除了添加popovertarget属性，还需添加popovertargetaction属性，属性值有三个:
-
show// 打开 -
hide// 隐藏 -
toggle// 切换，可以传参数true或者false来强制设置显示或者隐藏
<button popovertargetaction="show" popovertarget="pop">显示悬浮层</button>
<button popovertargetaction="hide" popovertarget="pop">隐藏悬浮层</button>
<button popovertargetaction="toggle" popovertarget="pop">切换悬浮层</button>
<div id="pop" popover>我是悬浮层</div>
第二种声明式.png
- 命令式
其实就是js控制显示隐藏，这样更加的灵活，应用场景也更加的丰富，例如点击，鼠标hover，键盘事件等
悬浮层元素有三个方法:
-
popoverEle.showPopover(); // 打开 -
popoverEle.hidePopover(); // 隐藏 -
popoverEle.togglePopover(force); // 切换，可以传参数true或者false来强制设置显示或者隐藏
<div id="btn">js控制显示悬浮层</div>
<div id="pop" popover>我是悬浮层</div>
const btn = document.querySelector("#btn");
const pop = document.querySelector("#pop");
btn.addEventListener("mouseenter",()=>{
pop.showPopover();
console.log(pop.matches(':popover-open'));
});
btn.addEventListener("mouseleave",()=>{
pop.hidePopover();
console.log(pop.matches(':popover-open'));
});
命令式.png
判断悬浮层元素显示隐藏状态两种方法
-
matches(':popover-open')
根据popElement.matches(':popover-open')来判断，返回true或者false - 也可以监听悬浮层的
toggle事件来监听显示隐藏状态
// 监听悬浮层元素显示隐藏状态
pop.addEventListener("toggle", (event)=>{
if(event.newState === "open"){
console.log("显示状态");
}else{
console.log("隐藏状态");
}
});
- 也可以通过
css伪类来选择悬浮层的打开关闭状态
[popover]{
display: block; /*默认是display:none，不会有动画*/
visibility: hidden;
opacity: 0;
transform: scale(.6);
transition: .3s;
}
[popover]:popover-open{
visibility: visible;
transform: scale(1);
opacity: 1;
}
页面中只有一个popover元素，并且层级是最高的，不会被其他元素遮盖
如下图所示，当点击第一个按钮(显示悬浮层)时，页面中所有的popover元素都会隐藏，然后显示第一个按钮关联的popover元素，并且popover元素会实际渲染到下图中的html元素后面，就是顶层#top-layer，也就是层级是最高的，高于页面上的一切。
只显示一个悬浮层.png
兼容性
高级浏览器都已经支持此属性，无需担心兼容性
