当前位置：首页 > 文章列表 > 文章 > 前端 > Popover API：使用 HTML 创建本机弹出窗口 - 无需 JavaScript

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

2025-01-21 17:37:13 0浏览收藏

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《Popover API：使用 HTML 创建本机弹出窗口 - 无需 JavaScript》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

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

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

什么是Popover API？

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

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

创建弹出窗口

基本实现

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



  这是一个基本的Popover示例。

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

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

添加关闭按钮


  此弹出框带有关闭按钮。

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

手动模式

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


  这是一个手动模式的Popover。

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

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

弹出框样式设计

使用背景元素

可以使用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并非模态框：

这是一个模态框。页面其余部分将被禁用。

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

如需模态效果，建议使用

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

增强Popover样式

使用元素

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

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


  样式化的Popover
  此Popover通过额外的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;
}
/* ...其他样式... */