Popover API：使用 HTML 创建本机弹出窗口 - 无需 JavaScript-css教程-PHP中文网

Popover API：使用 HTML 创建本机弹出窗口 - 无需 JavaScript

碧海醫心

发布： 2025-01-18 18:38:22

原创

500人浏览过

全新Popover API：轻松创建无JavaScript弹出框！

无需依赖库或编写javascript代码，全新的popover api让创建弹出窗口变得轻而易举！此功能已获得所有主流浏览器的支持，本文将演示其便捷性。

什么是Popover API？

Popover API：使用 HTML 创建本机弹出窗口 - 无需 JavaScript

Popover API是新兴的Web开发标准，旨在简化网站弹出框的创建。它免去了繁琐的状态管理，打开和关闭操作都非常直观，并且内置了可访问性特性。

创建弹出窗口

基本实现

以下是如何创建弹出窗口：

<code class="html"><button id="myPopoverButton" popover-target="myPopover">Open Popover</button>
<div id="myPopover" popover="">
  <p>这是一个基本的Popover示例。</p>
</div></code>

登录后复制

创建一个用于触发弹出框的按钮。
使用popover-target属性将按钮与弹出框关联，并指定弹出框的ID。
为弹出框元素添加popover属性。

完成！点击按钮即可打开弹出框，点击按钮外部则自动关闭（轻关闭功能默认启用）。目前，按钮具有切换功能（未额外指定其他行为）。

立即学习“Java免费学习笔记（深入）”；

添加关闭按钮

<code class="html"><div id="closeablePopover" popover="">
  <p>此弹出框带有关闭按钮。</p>
  <button popover-hide="closeablePopover">X</button>
</div></code>

登录后复制

在弹出框内添加一个按钮，并使用popover-hide属性指定关闭目标，即可实现自定义关闭功能。只需少量CSS样式调整，即可获得一个可通过点击“X”按钮关闭的弹出框。

手动模式

默认情况下，弹出框处于自动模式：

<code class="html"><div id="manualPopover" popover="manual">
  <p>这是一个手动模式的Popover。</p>
  <button popover-hide="manualPopover">关闭</button>
</div></code>

登录后复制

打开时会关闭其他已打开的弹出框。
轻关闭功能启用。

手动模式下，弹出框不会自动关闭其他弹出框或触发轻关闭，需要通过代码或交互操作来显示或隐藏。此处，我们通过背景中的“关闭”按钮实现了隐藏功能。

弹出框样式设计

使用背景元素

可以使用ID选择器来设置背景元素样式，在弹出框打开时覆盖页面其余部分。

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

查看详情

<code class="css">[popover] {
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 16px;
  max-width: 300px;
}
/* ...其他样式... */</code>

登录后复制

轻松设置背景颜色和透明度，提升弹出框的可视性和焦点。

弹出框与模态框

Popover并非模态框：

<code class="html"><dialog id="myModal"><p>这是一个模态框。页面其余部分将被禁用。</p>
  <button onclick="this.closest('dialog').close()">关闭模态框</button>
</dialog>
<button onclick="document.getElementById('myModal').showModal()">打开模态框</button></code>

登录后复制

弹出框不会禁用页面其余部分的交互。
例如，在弹出框打开时，仍然可以点击其他按钮。

如需模态效果，建议使用<dialog>元素和showModal()方法，虽然需要少量JavaScript代码，但能确保用户只能与模态框交互。

增强Popover样式

使用`<dialog>`元素

Popover本身不具备语义化属性，可以使用<dialog>元素来增强其样式和功能。

<code class="html"><dialog id="styledPopover" popover="">
  <h3>样式化的Popover</h3>
  <p>此Popover通过额外的CSS样式进行了美化。</p>
  <button class="primary">主要操作</button>
  <button popover-hide="styledPopover">X</button>
</dialog></code>

登录后复制

<code class="css">dialog[popover] {
  font-family: Arial, sans-serif;
  border: none;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  max-width: 400px;
}
/* ...其他样式... */</code>

登录后复制