此页面由 Cloud Translation API 翻译。

弹出式窗口：正在复苏！

Jhey Tompkins

注意：2022 年 10 月 27 日，Open UI 计划决定将 Popover API 的属性从 popup 更改为 popover。此更改请求已于 2022 年 11 月 3 日合并到 Chromium 中。更新了参考文档，以使用新的 popover 命名惯例。

开放式界面计划的目标是让开发者更轻松地打造出色的用户体验。为此，我们会尝试解决开发者面临的更棘手的问题。我们可以通过提供更出色的平台内置 API 和组件来实现这一点。

其中一个问题领域是弹出式窗口，在 Open 界面中称为“弹出式窗口”。

长久以来，Popover 的声誉相当分化。这在一定程度上取决于它们的构建和部署方式。这种模式并不容易构建得当，但它可以引导用户执行特定操作或让他们了解您网站上的内容，从而产生巨大价值，尤其是在以恰当的方式使用时。

构建弹出式窗口时，通常有两个主要问题：

如何确保其在适当位置展示于其余内容之上。
如何使其具有无障碍功能（适合键盘操作、可聚焦等）。

内置的 Popup API 具有多种目标，但所有这些目标都具有一个共同的总体目标，即让开发者能够轻松构建此模式。其中一些目标包括：

轻松在文档的其余部分上方显示某个元素及其子元素。
使其可访问。
大多数常见行为（轻量关闭、单例、堆叠等）无需 JavaScript。

您可以在 OpenUI 网站上查看弹出式窗口的完整规范。

浏览器兼容性

现在您可以在哪里使用内置的 Popover API？截至撰写本文时，Chrome Canary 支持此功能，但需要启用“实验性 Web 平台功能”标志。

若要启用该标记，请打开 Chrome Canary 并访问 chrome://flags。然后，启用“实验性网站平台功能”标志。

如果开发者想要在生产环境中测试此功能，还可以通过源试用。

最后，我们正在为该 API 开发 polyfill。请务必访问 github.com/oddbird/popup-polyfill 查看代码库。

您可以通过以下方式检查弹出式窗口支持情况：

const supported = HTMLElement.prototype.hasOwnProperty("popover");

当前解决方案

您目前可以采取哪些措施来宣传自己的内容？如果您的浏览器支持此类元素，您可以使用 HTML 对话框元素。您需要在“模态”表单中使用它。此功能需要 JavaScript 才能使用。

Dialog.showModal();

请注意以下无障碍功能注意事项。例如，如果要为版本低于 15.4 的 Safari 用户提供服务，建议使用 a11y-dialog。

您也可以使用众多基于弹出式窗口、提醒或提示的库。其中许多功能的工作原理大致相同。

将一些容器附加到正文中，以显示 popover。
设置其样式，使其位于所有其他内容之上。
创建一个元素并将其附加到容器，以显示一个弹出式窗口。
您可以通过从 DOM 中移除弹出式窗口元素来将其隐藏。

这需要额外的依赖项，并且开发者需要做出更多决策。您还需要进行研究，找到能够提供您所需的一切服务的方案。Popover API 旨在适应许多场景，包括提示。我们的目标是涵盖所有这些常见场景，让开发者无需再做出其他决策，从而专注于构建体验。

您的第一个弹出式窗口

这就是您所需的一切。

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

但这里发生了什么？

您无需将弹出式窗口元素放入容器或任何其他元素中，因为默认情况下，该元素是隐藏的。
您无需编写任何 JavaScript 即可显示此按钮。这由 popovertoggletarget 属性处理。
出现时，它会提升到顶层。也就是说，它会在视口中显示在 document 上方。您无需管理 z-index，也不必担心您的弹出式窗口在 DOM 中的位置。它可以深层嵌套在 DOM 中，并具有剪裁祖先。您还可以通过 DevTools 查看当前位于顶层的元素。如需详细了解顶层，请参阅这篇文章。

演示开发者工具顶层支持的 GIF

您可以直接使用“轻触关闭”功能。也就是说，您可以使用关闭信号关闭弹出式窗口，例如点击弹出式窗口之外的区域、使用键盘导航到其他元素或按 Esc 键。再次打开并试用吧！

借助弹出式窗口，您还可以获得哪些好处？我们继续使用以下示例。请考虑以下在页面上显示了一些内容的演示。

该悬浮操作按钮采用固定定位，z-index 较高。

.fab {
  position: fixed;
  z-index: 99999;
}

弹出式窗口内容嵌套在 DOM 中，但当您打开弹出式窗口时，它会提升到该固定位置元素上方。您无需设置任何样式。

您可能还注意到，现在该弹出式窗口有一个 ::backdrop 伪元素。顶层中的所有元素都会获得可设置样式的 ::backdrop 伪元素。此示例使用较低的 Alpha 背景颜色和背景幕滤镜设置了 ::backdrop 的样式，该滤镜会对底层内容进行模糊处理。

注意：默认情况下，弹出式窗口上的 ::backdrop 已设置 pointer-events: none。

接下来，我们来设置 popover 的样式。默认情况下，弹出式窗口具有固定的位置，并应用了一些内边距。它还具有 display: none。您可以替换此方法以显示一个弹出式窗口。但是，这样不会将其提升到顶层。

[popover] { display: block; }

无论您以何种方式将弹出式窗口提升到顶层，在将弹出式窗口提升到顶层后，您可能需要对其进行布局或定位。您不能定位顶层，也不能执行

:open {
  display: grid;
  place-items: center;
}

默认情况下，系统将使用 margin: auto 将弹出式窗口放置在视口中心。但在某些情况下，您可能需要明确说明定位。例如：

[popover] {
  top: 50%;
  left: 50%;
  translate: -50%;
}

如果您想使用 CSS 网格或 Flexbox 在弹出式窗口中排列内容，不妨将其封装在元素中。否则，您需要声明一个单独的规则，以便在 popover 位于顶层时更改 display。默认设置它会默认显示它，并替换 display: none。

[popover]:open {
 display: flex;
}

如果您尝试了该演示，会发现现在，该弹出式窗口会进行进入和退出转换。您可以使用 :open 伪类选择器来实现 popover 的显示和隐藏过渡效果。:open 伪选择器会与正在显示（因此位于顶层）的弹出式窗口匹配。

注意：如需检查某个元素是否使用 JavaScript 打开，请使用 element.matches(':open')。请注意，这一点可能会随着规范的发展而发生变化。

此示例使用自定义属性来驱动转换。您还可以对 popover 的 ::backdrop 应用转场效果。

[popover] {
  --hide: 1;
  transition: transform 0.2s;
  transform: translateY(calc(var(--hide) * -100vh))
            scale(calc(1 - var(--hide)));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: calc(1 - var(--hide, 1));
}


[popover]:open::backdrop  {
  --hide: 0;
}

一个技巧是将过渡和动画分组到用于运动的媒体查询下。这也有助于保持计时。这是因为您无法通过自定义属性在 popover 和 ::backdrop 之间共享值。

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition: transform 0.2s; }
  [popover]::backdrop { transition: opacity 0.2s; }
}

到目前为止，您已经了解了使用 popovertoggletarget 显示弹出式窗口。要关闭它，我们使用了“轻微关闭”。不过，您还可以使用 popovershowtarget 和 popoverhidetarget 属性。我们将向弹出式窗口中添加一个按钮来隐藏该按钮，并将切换按钮更改为使用 popovershowtarget。

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>

注意：您可能还会注意到，进入和退出过渡已发生变化。现在，它由单独的动画提供支持，可从一侧进入，从另一侧退出。这意味着，您可以执行诸如在一个轴上进入并在另一个轴上退出等操作。如果 ::backdrop 和 [popover] 的时间不同，请务必设置 animation-fill-mode。

如前所述，Popover API 涵盖的不仅仅是我们之前所说的弹出式窗口。您可以针对通知、菜单、提示等所有类型的场景进行构建。

其中一些场景需要不同的互动模式。悬停等互动。我们曾尝试使用 popoverhovertarget 属性，但目前尚未实现。

<div popoverhovertarget="hover-popover">Hover for Code</div>

具体做法是将鼠标悬停在某个元素上，以显示目标。此行为可通过 CSS 属性进行配置。这些 CSS 属性将定义悬停和悬停在弹出式窗口响应的元素上的时间范围。在实验中，默认行为是在 :hover 的显式 0.5s 之后显示一个弹出式窗口。然后，需要轻轻关闭或打开另一个弹出式窗口才能关闭（后面会详细介绍）。这是因为我们将弹出式窗口隐藏时长设置为 Infinity。

注意：popoverhovertarget 的使用未标准化或目前尚未实现。

与此同时，您可以使用 JavaScript 来实现该功能的部分功能。

let hoverTimer;
const HOVER_TRIGGERS = document.querySelectorAll("[popoverhovertarget]");
const tearDown = () => {
  if (hoverTimer) clearTimeout(hoverTimer);
};
HOVER_TRIGGERS.forEach((trigger) => {
  const popover = document.querySelector(
    `#${trigger.getAttribute("popoverhovertarget")}`
  );
  trigger.addEventListener("pointerenter", () => {
    hoverTimer = setTimeout(() => {
      if (!popover.matches(":open")) popover.showPopOver();
    }, 500);
    trigger.addEventListener("pointerleave", tearDown);
  });
});

将某个内容设置为显式悬停窗口的好处在于，它可确保用户的操作是故意的（例如，用户将指针悬停在目标上）。除非用户有意，否则我们不想显示弹出式窗口。

试用此演示版，您可以在其中将窗口设置为 0.5s，然后将鼠标悬停在目标上。

在探索一些常见的使用场景和示例之前，我们先来了解一些事项。

我们已经介绍了非 JavaScript 互动行为。但作为一个整体的弹出式窗口行为呢？如果您不想使用“轻触关闭”，该怎么办？或者，您想对弹出式窗口应用单例模式？

借助 Popover API，您可以指定三种行为不同的 popover。

[popover=auto]/[popover]：

嵌套支持。这也不只是指嵌套在 DOM 中。祖先 popover 的定义如下：
- 通过 DOM 位置（子元素）相关联。
- 通过在子元素（例如 popovertoggletarget、popovershowtarget 等）上触发属性相关联。
- 通过 anchor 属性相关联（CSS 锚点 API 正在开发中）。
轻关闭。
打开此类窗口会关闭非祖先窗口的其他窗口。观看下面的演示，其中重点介绍了如何使用古老的弹出式窗口进行嵌套。了解将部分 popoverhidetarget/popovershowtarget 实例更改为 popovertoggletarget 会产生什么影响。
轻触关闭其中一个会关闭所有通知，但关闭堆叠中的某个通知只会关闭堆叠中位于其上方的通知。

这个 Pen

注意：之前，我们实现了第三种使用 popover=hint 的 popover，用于工具提示等用例。此问题已于 2022 年 10 月 13 日得到解决，我们将其移至第二个实现版本。

[popover=manual]：

不会关闭其他弹出式窗口。
没有关闭指示灯。
需要通过触发器元素或 JavaScript 明确关闭。

JavaScript API

如果您需要对弹出式窗口进行更多控制，可以使用 JavaScript 进行处理。您将同时获得 showPopover 和 hidePopover 方法。您还需要监听 popovershow 和 popoverhide 事件：

显示弹出式窗口 js popoverElement.showPopover() 隐藏弹出式窗口：

popoverElement.hidePopover()

监听是否显示了弹出式窗口：

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

监听是否显示了 popover，并取消其显示：

popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a popover from being shown’);
})

监听是否有弹出式窗口被隐藏：

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

您无法取消隐藏的弹出式窗口：

popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})

检查弹出式窗口是否在顶层：

popoverElement.matches(':open')

这能为一些不太常见的情况提供额外的能量。例如，在用户闲置一段时间后显示一个弹出式窗口。

此演示包含带有声音提示的弹出式窗口，因此我们需要使用 JavaScript 来播放音频。点击后，我们会隐藏弹出式窗口、播放音频，然后再次显示弹出式窗口。

无障碍

在设计 Popover API 时，我们将无障碍功能放在首位。无障碍映射会根据需要将弹出式窗口与其触发器元素相关联。这意味着，假设您使用了 popovertoggletarget 等触发属性，则无需声明 aria-* 属性（例如 aria-haspopup）。

对于焦点管理，您可以使用 autofocus 属性将焦点移到弹出式窗口内的某个元素上。这与对话框相同，但在返回焦点时会有所不同，这是因为轻松关闭。在大多数情况下，关闭弹出式窗口会使焦点返回到先前聚焦的元素。但是，如果被点击的元素可以获得焦点，那么在浅色关闭时，焦点会移动到所点击的元素。请参阅说明中有关专注管理的部分。

您需要打开此演示的全屏版本，才能查看其运作方式。

在此演示中，获得焦点的元素会获得绿色轮廓。请尝试使用键盘在界面中按 Tab 键。请注意，当关闭弹出式窗口时焦点会返回到何处。您可能还注意到，如果您按 Tab 键浏览，该弹出式窗口会关闭。这是由设计来决定的。虽然 popover 具有焦点管理功能，但不会捕获焦点。当焦点移出 popover 时，键盘导航会识别关闭信号。

锚定（正在开发中）

对于弹出式窗口，一个需要迎合的棘手模式是将元素锚定到其触发器。例如，如果提示被设置为显示在其触发器上方，但文档被滚动。该提示可能会被视口截断。目前，有一些 JavaScript 产品可用于解决此问题，例如“浮动界面”。它们会调整提示的位置，以阻止此操作发生，并依赖所需的排名顺序。

不过，我们希望您能够通过自己的样式来定义这一点。我们正在开发一个与 Popover API 配套的 API 来解决此问题。借助“CSS 锚点定位”API，您可以将元素锚定到其他元素，并且会以重新定位元素的方式执行此操作，以免元素被视口截断。

此演示版在当前状态下使用 Anchoring API。船的位置会响应视口中锚点的位置。

以下是使此演示正常运行的 CSS 代码段。无需 JavaScript。

.anchor {
  --anchor-name: --anchor;
}
.anchored {
  position: absolute;
  position-fallback: --compass;
}
@position-fallback --compass {
  @try {
    bottom: anchor(--anchor top);
    left: anchor(--anchor right);
  }
  @try {
    top: anchor(--anchor bottom);
    left: anchor(--anchor right);
  }
}

您可以点击此处查看规范。此 API 还将提供 polyfill。

示例

现在，您已经熟悉了弹出式窗口的功能和用法，下面我们来看一些示例。

通知

此演示会显示“复制到剪贴板”通知。

使用 [popover=manual]。
在执行操作时，使用 showPopover 显示弹出式窗口。
2000ms 超时后，使用 hidePopover 隐藏它。

消息框

此演示使用顶部层来显示消息框式通知。

一个类型为 manual 的 popover 充当容器。
新通知会附加到弹出式窗口中，并显示弹出式窗口。
点击时，系统会使用 Web 动画 API 移除它们，并将其从 DOM 中移除。
如果没有可显示的消息框，系统会隐藏弹出式窗口。

嵌套菜单

此演示展示了嵌套导航菜单的运作方式。

使用 [popover=auto]，因为它允许嵌套的 popover。
使用 autofocus 在每个下拉菜单的第一个链接上，以便使用键盘导航。
这非常适合使用 CSS Anchoring API。不过，在此演示中，您可以使用少量 JavaScript 代码来使用自定义属性更新位置。

const ANCHOR = (anchor, anchored) => () => {
  const { top, bottom, left, right } = anchor.getBoundingClientRect();
  anchored.style.setProperty("--top", top);
  anchored.style.setProperty("--right", right);
  anchored.style.setProperty("--bottom", bottom);
  anchored.style.setProperty("--left", left);
};

PRODUCTS_MENU.addEventListener("popovershow", ANCHOR(PRODUCT_TARGET, PRODUCTS_MENU));