标签导航：

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

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

什么是Popover API？

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

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

创建弹出窗口

基本实现

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

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

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

添加关闭按钮

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

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

手动模式

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

<div id="manualPopover" popover="manual">
  <p>这是一个手动模式的Popover。</p>
  <button popover-hide="manualPopover">关闭</button>
</div>
  1. 打开时会关闭其他已打开的弹出框。
  2. 轻关闭功能启用。

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

弹出框样式设计

使用背景元素

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

[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;
}
/* ...其他样式... */

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

弹出框与模态框

Popover并非模态框：

<dialog id="myModal"><p>这是一个模态框。页面其余部分将被禁用。</p>
  <button onclick="this.closest('dialog').close()">关闭模态框</button>
</dialog>
<button onclick="document.getElementById('myModal').showModal()">打开模态框</button>
  1. 弹出框不会禁用页面其余部分的交互。
  2. 例如，在弹出框打开时，仍然可以点击其他按钮。

如需模态效果，建议使用

元素和showModal()方法，虽然需要少量JavaScript代码，但能确保用户只能与模态框交互。

增强Popover样式

使用元素

Popover本身不具备语义化属性，可以使用

元素来增强其样式和功能。

<dialog id="styledPopover" popover="">
  <h3>样式化的Popover</h3>
  <p>此Popover通过额外的CSS样式进行了美化。</p>
  <button class="primary">主要操作</button>
  <button popover-hide="styledPopover">X</button>
</dialog>
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;
}
/* ...其他样式... */

添加更多内容及应用CSS

添加更多内容，例如按钮，并使用CSS进行样式调整，例如设置字体、边框、填充、圆角、按钮样式等。

将JavaScript与Popover结合使用

可选择性地使用JavaScript增强Popover功能，例如使用showPopover()方法打开弹出框。

结论

希望本文能帮助您快速掌握Popover API。欢迎在评论区留言分享您的经验！感谢您的阅读和关注！

关注我：领英 | 中文网站 | 蓝色网站