HTML Popover 弹窗

HTML Popover API 已于2024年正式成为浏览器标准弹出窗口，它允许用户无需通过繁琐的设计就能轻松创建标准的弹出窗口。试看代码和效果：

<button popovertarget="popover1">点我打开弹出窗口</button>
<div id="popover1" popover>
    <p>我是 Popover 弹出窗口！</p>
    <p>点击我以外的任何地方，或者按键盘上的 ESC 键关闭我</p>
</div>

点我打开弹出窗口

我是 Popover 弹出窗口！

点击我以外的任何地方，或者按键盘上的 ESC 键关闭我……

一切就是这么简单。关键点是：一，需要一个按钮来激活弹窗，不论是 button 还是 input type="button" 都可以，按钮一定使用属性 popovertarget 绑定弹窗的 id；二，弹窗元素可以是 div 或其他 block 元素，设置唯一的 id，并使用 popover 属性。

popover 属性默认值是 auto，它允许按 ESC 键或点击弹出以外的任意地方将其关闭。可以设置 popover 属性为手动，manual，若此，弹窗应该提供关闭操作入口。看下面的代码和演示效果：

<button popovertarget="popover2">点我打开弹出窗口</button>
<div id="popover2" popover="manual">
    <p>我是 Popover 弹出窗口！</p>
    <p>点击我下面的关闭按钮才能将我关闭……</p>
    <p><button popovertarget="popover2" popovertargetaction="hide">❌</button></p>
</div>

点我打开弹出窗口

我是 Popover 弹出窗口！

点击我下面的关闭按钮才能将我关闭……

❌

手动关闭 popover 弹窗的要点：弹窗上面的关闭按钮（button或input type="button"）同样需要绑定弹窗的 id，而且使用属性 popovertargetaction="hide" 来设置点击行为为隐藏（hide）。

使用 Popover API 可以一句JS代码都不用写就能实现弹窗。这不等于说JS对 popover 窗口就无能为力，恰恰相反，结合JS可以让 popover 弹窗做更多的事情，当然，JS不必去处理弹窗的实现细节，可以将精力更多地专注于实现弹窗的业务层面。以下示例模拟复制提示，不真正复制什么，只是模拟复制成功后的提示弹窗，提示用户复制成功，三秒后自动关闭：

<button id="btnCopy" popovertarget="popover3">复制源码</button>
<div id="popover3" popover="manual">源码成功复制！祝你好运！</div>

<script>
    var btnCopy = document.getElementById('btnCopy');
    var ppv = document.getElementById('popover3');
    
    btnCopy.onclick = () => copyDone(ppv);
    
    const copyDone = (popoElment) => setTimeout( () => ppv.hidePopover(), 3000 );
</script>

复制源码（仅模拟）

源码成功复制！祝你好运！

这里，自定义函数 copyDone(弹窗元素) 只做一件事情：管理弹窗，使用 setTimeout 定时器在弹窗弹出三秒后将其关闭。该函数是在复制按钮点击时触发。这里需要熟悉JS基于 Popover 弹窗的操作指令，可以查阅手册了解更多的属性、事件等知识。

【小结】Popover 弹窗需要拥有唯一 id 且需要设置 popover 属性，通过按钮（button或input type="button"）其 id 实现弹窗管理，若弹窗的 popover 属性设置为手动（manual），则应在弹窗中安置关闭按钮。如果愿意，弹窗的管理也可以使用JS操作。

【附】现代浏览器基本都已经完美支持 HTML Popover API，仅火狐略微滞后（到目前止支持度还不完美）。

文章来源：马黑PHP整站系统