HTML Popover 弹窗
<style>.artBox { font-size: 20px; margin: 30px auto; max-width: 1200px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; }
.artBox > p { margin: 15px 0; line-height: 1.8; text-align: justify; }
.artBox pre { white-space: pre-wrap; word-break: break-all; }
.artBox blockquote { background: beige; border-left: 4px solid darkgreen; padding: 15px 20px; margin: 20px; color: #333; border-radius: 8px; }
.artBox code { background: #eee; padding: 2px 6px; border-radius: 3px; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.95em; }
.artBox .tMid { text-align: center; }
.artBox .tRed { color: red; }
.artBox button { padding: 6px 12px; background: #eeffdd; border-radius: 10px; border-color: darkgreen; min-width: 100px; }
.artBox button:hover { background: #ffeecc; color: red; }
.artBox { padding: 16px 20px; border-radius: 16px; }
</style>
<div class="artBox">
<p>HTML Popover API 已于2024年正式成为浏览器标准弹出窗口，它允许用户无需通过繁琐的设计就能轻松创建标准的弹出窗口。试看代码和效果：</p>
<blockquote>
<pre><button <span class="tRed">popovertarget="popover1"</span>>点我打开弹出窗口</button>
<div <span class="tRed">id="popover1" popover</span>>
<p>我是 Popover 弹出窗口！</p>
<p>点击我以外的任何地方，或者按键盘上的 ESC 键关闭我</p>
</div></pre>
</blockquote>
<button popovertarget="popover1">点我打开弹出窗口</button>
<div id="popover1" popover>
<p>我是 Popover 弹出窗口！</p>
<p>点击我以外的任何地方，或者按键盘上的 ESC 键关闭我……</p>
</div>
<p>一切就是这么简单。关键点是：一，需要一个按钮来激活弹窗，不论是 button 还是 input type="button" 都可以，按钮一定使用属性 <code>popovertarget</code> 绑定弹窗的 id；二，弹窗元素可以是 div 或其他 block 元素，设置唯一的 id，并使用 <code>popover</code> 属性。</p>
<p>popover 属性默认值是 auto，它允许按 ESC 键或点击弹出以外的任意地方将其关闭。可以设置 popover 属性为手动，manual，若此，弹窗应该提供关闭操作入口。看下面的代码和演示效果：</p>
<blockquote>
<pre><button <span class="tRed">popovertarget="popover2"</span>>点我打开弹出窗口</button>
<div <span class="tRed">id="popover2" popover="manual"</span>>
<p>我是 Popover 弹出窗口！</p>
<p>点击我下面的关闭按钮才能将我关闭……</p>
<p><button <span class="tRed">popovertarget="popover2" popovertargetaction="hide"</span>>❌</button></p>
</div></pre>
</blockquote>
<button popovertarget="popover2">点我打开弹出窗口</button>
<div id="popover2" popover="manual">
<p>我是 Popover 弹出窗口！</p>
<p>点击我下面的关闭按钮才能将我关闭……</p>
<p class="tMid"><button popovertarget="popover2" popovertargetaction="hide">❌</button></p>
</div>
<p>手动关闭 popover 弹窗的要点：弹窗上面的关闭按钮（button或input type="button"）同样需要绑定弹窗的 id，而且使用属性 <code>popovertargetaction="hide"</code> 来设置点击行为为隐藏（hide）。</p>
<p>使用 Popover API 可以一句JS代码都不用写就能实现弹窗。这不等于说JS对 popover 窗口就无能为力，恰恰相反，结合JS可以让 popover 弹窗做更多的事情，当然，JS不必去处理弹窗的实现细节，可以将精力更多地专注于实现弹窗的业务层面。以下示例模拟复制提示，不真正复制什么，只是模拟复制成功后的提示弹窗，提示用户复制成功，三秒后自动关闭：</p>
<blockquote>
<pre><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></pre>
</blockquote>
<button id="btnCopy" popovertarget="popover3" onclick="setTimeout('popover3.hidePopover()',3000)">复制源码（仅模拟）</button>
<div id="popover3" popover="manual">源码成功复制！祝你好运！</div>
<p>这里，自定义函数 copyDone(弹窗元素)只做一件事情：管理弹窗，使用 setTimeout 定时器在弹窗弹出三秒后将其关闭。该函数是在复制按钮点击时触发。这里需要熟悉JS基于 Popover 弹窗的操作指令，可以查阅手册了解更多的属性、事件等知识。</p>
<p>【小结】Popover 弹窗需要拥有唯一 id 且需要设置 <code>popover</code> 属性，通过按钮（button或input type="button"）其 id 实现弹窗管理，若弹窗的 <code>popover</code> 属性设置为手动（manual），则应在弹窗中安置关闭按钮。如果愿意，弹窗的管理也可以使用JS操作。</p>
<p>【附】现代浏览器基本都已经完美支持 HTML Popover API，仅火狐略微滞后（到目前止支持度还不完美）。</p>
</div> Discuz! 论坛程序貌似对普通ESC键的操作进行拦截，这里第一个示例演示后按 ESC键 无效。我站点的演示没有这个问题：
HTML Popover 弹窗
马黑黑 发表于 2026-2-24 11:41
Discuz! 论坛程序貌似对普通ESC键的操作进行拦截，这里第一个示例演示后按 ESC键 无效。我站点的演示没有这 ...
虽然按ESC键没用，点空白地方还是有用的{:4_204:} 黑黑带来的很多东西都没见过，辛苦黑黑，学习了。{:4_187:} 红影 发表于 2026-2-24 14:21
黑黑带来的很多东西都没见过，辛苦黑黑，学习了。
这时相对比较新的API，目前 MDN 中文官网的介绍还非常简单 红影 发表于 2026-2-24 14:07
虽然按ESC键没用，点空白地方还是有用的
就是 discuz 对 ESC 快捷键做了拦截，它可能另有用途 马黑黑 发表于 2026-2-24 18:17
这时相对比较新的API，目前 MDN 中文官网的介绍还非常简单
黑黑带来的都是最新科技呢{:4_187:} 马黑黑 发表于 2026-2-24 18:18
就是 discuz 对 ESC 快捷键做了拦截，它可能另有用途
这个你不说都不知道呢。 红影 发表于 2026-2-24 20:49
这个你不说都不知道呢。
我也是在这里发了才发现 红影 发表于 2026-2-24 20:49
黑黑带来的都是最新科技呢
有选择的，用得上的才介绍一下 学习了~谢谢马老师精彩讲解HTML Popover API 相关知识{:4_180:} 杨帆 发表于 2026-2-25 18:05
学习了~谢谢马老师精彩讲解HTML Popover API 相关知识
{:4_191:} 马黑黑 发表于 2026-2-24 21:08
我也是在这里发了才发现
嗯嗯，除了你别人也发现不了{:4_187:} 马黑黑 发表于 2026-2-24 21:09
有选择的，用得上的才介绍一下
也就是你知道的比这多得多{:4_187:} 红影 发表于 2026-2-25 20:55
也就是你知道的比这多得多
不多不行。养猪人就得知天下。 红影 发表于 2026-2-25 20:55
嗯嗯，除了你别人也发现不了
其实很多人都发现的，问题不是发现不发现，而是关切不关切。 马黑黑 发表于 2026-2-25 21:36
不多不行。养猪人就得知天下。
咋总觉得你说的猪油可能是人呢{:4_173:} 马黑黑 发表于 2026-2-25 21:37
其实很多人都发现的，问题不是发现不发现，而是关切不关切。
还有就是是否用得上，是否有影响的缘故。 红影 发表于 2026-2-25 23:10
还有就是是否用得上，是否有影响的缘故。
大概是这个意思 马黑黑 发表于 2026-2-25 23:40
大概是这个意思
嗯嗯，基本是这样。
页:
[1]
2