HTML popover 弹出窗口属性

二十年来，模态一直是网站的重要组成部分。在桌面和移动设备上，堆叠内容和使用fetch 获取来完成任务是改善用户体验的好方法。遗憾的是，大多数开发人员都不知道 HTML 和 JavaScript 规范已经通过 popover 属性实现了原生模态系统，让我们一起来看看吧！

HTML

创建本地 HTML 模态包括使用 popovertarget 属性作为触发器，以及使用与 id 配对的 popover 属性来标识内容元素：

<!-- 
  "popovertarget" attribute will map to "id" of popover contents
-->
<button popovertarget="popover-contents">Open popover</button>
<div id="popover-contents" popover>This is the contents of the popover</div>

点击按钮后，弹出窗口将打开。不过，弹出窗口没有传统的背景层颜色，因此我们需要使用一些 CSS 技巧来实现。

CSS

弹出窗口内容的样式是非常标准的，但我们可以使用浏览器样式表选择器的伪选择器来样式化模态的 “background”：

/* contents of the popover */
[popover] {
  background: lightblue;
  padding: 20px;
}

/* the dialog's "modal" background */
[popover]:-internal-popover-in-top-layer::backdrop {
  background: rgba(0, 0, 0, .5);  
}

:-internal-popover-in-top-layer::backdrop 表示模态的 “背景”。传统上，用户界面是一个具有不透明度的元素，以显示堆叠关系。