此页面由 Cloud Translation API 翻译。

Popover 案例研究

Swetha Gopalakrishnan

Saurabh Rajpal

弹出式窗口在网络中随处可见。你可以在菜单、切换提示对话框，用于账号设置、披露信息微件以及商品卡片预览。尽管这些组件非常普遍，构建它们仍然令人惊讶。为了解决这一问题用于构建弹出式窗口的声明式 HTML API 即将登陆浏览器，这是我们最早的即 Popover API。

Popover 是基准新发布的计划的一部分。

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

弹出式窗口通常与对话框相混淆。不过，也有一些关键点行为差异使用 dialog.showModal 打开的 dialog 元素（模态对话框）是指需要用户明确互动才能关闭模态窗口。popover 支持浅色关闭。模态 dialog 不会。模态对话框会使页面的其余部分变为休眠状态。popover 则不行。详细了解二者差异。

本文是我们系列文章中的一篇，探讨了电子商务公司使用新的 CSS 和界面功能改进其网站。在本文中，您将了解 Tokopedia 如何实施 Popover API 并从中受益。

Tokopedia

在 React 中使用弹出式窗口属性后，最多可减少 70% 的代码行数。模态框可由 HTML 进行本地控制，而无需在 JavaScript 以及使用 React.createPortal 将模态 DOM 移至末尾 document.body。我们还可以使用 @starting-style 为弹出式窗口的打开和关闭...Andy Wihalim，高级软件 Tokopedia 工程师。

Tokopedia 的商品详情页面 (PDP) 为每个页面提供了多张产品图片。产品。点击商品缩略图时，系统会打开一个模态窗口，以显示放大的图片。这是电子商务网站中使用的一种常见模式。

代码

Tokopedia 使用 React 进行前端开发。在实施 Popover API，他们使用了 DOM 模态和一个按钮。按钮更改了 React 状态以打开模态窗口。使用 Popover API，他们可以指定元素中的 popovertarget 属性，用于打开带有值的弹出式窗口与弹出广告元素的 ID 相同。

通过这种基本实现，弹出式窗口可以运行，但显示和消失没有任何动画效果要为弹出式窗口，使用 :popover-open 和 @starting-style 并允许显示以下内容的动画：离散属性。在下面的代码示例中，该弹出式窗口使用 transform: 'scale()' 属性。

此代码示例展示了如何为 Popover API 实现进入和退出动画。

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },
  transform: 'scale(0.8)',
  opacity: 0,

  '&:popover-open': {
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
    transform: 'scale(1)',
    opacity: 1,
  },
});

为了迎合不支持弹出式窗口 API 的浏览器，Tokopedia 实施了 oddbird 的 popover-polyfill，而 gzip 压缩则仅为 3.2 KB。他们对 polyfill 感到满意因为它运行良好，并且不会导致性能下降。总体而言，使用 Popover API 能将 React 中的代码行减少多达 70%。

Tokopedia 使用 React 实现了代码拆分，该团队通过卸载弹出窗口组件（适用于不使用该组件的网页），然后针对该组件弹出式窗口内容。这样，他们就可以减小初始请求的大小。

考虑将弹出式窗口与 CSS 锚点定位结合使用（即将在 Chrome 中推出）来调整它们相对于其他元素的位置例如，这对于菜单和提示非常有用。

资源

敬请阅读本系列中的其他文章，了解电子商务如何公司受益于新推出的 CSS 和界面功能，例如滚动驱动型动画、弹出式窗口、容器查询和 has() 选择器。

Popover 案例研究

Tokopedia

代码

使用 Popover API 时的注意事项

资源