CSS `Pop-up API` (提案) `invoketarget` 与 `popovertarget` 元素绑定

各位前端的靓仔们，早上好！今天咱们聊聊一个即将改变Web世界交互方式的家伙——CSS Pop-up API，特别是它里面两个关键的属性：invoketarget 和 popovertarget。准备好迎接一波新的开发姿势了吗？Let’s go!

第一部分：认识Pop-up API——不再依赖JS的弹窗时代

先问大家一个问题：你觉得用JavaScript实现一个弹窗复杂吗？答案肯定是：看情况！简单弹窗还好，复杂的，那嵌套、动画、各种状态管理，想想都头大。 Pop-up API的出现，就是为了解放我们这些苦逼的前端，让弹窗这种东西，交给CSS来管！

Pop-up API的核心思想是，通过HTML属性和CSS样式，声明式地控制元素的显示和隐藏，以及元素之间的交互行为。简单来说，就是用更少的JS代码，实现更强大的弹窗效果。

Pop-up API的核心特性

声明式API: 通过HTML属性定义弹窗的行为，减少JavaScript代码。
语义化: 使用popover属性表示一个元素是弹窗，提高代码可读性。
焦点管理: 自动管理弹窗的焦点，提高可访问性。
层叠上下文: 弹窗元素自动提升到顶层，避免层叠问题。
默认样式: 提供一些默认样式，简化开发。

第二部分：popover 属性——给你的元素贴上“我是弹窗”的标签

首先，我们需要告诉浏览器，哪个元素是弹窗。这就要用到popover属性。

popover属性有三个取值：

auto：默认值，点击弹窗外部区域会自动关闭弹窗。
manual：手动模式，需要使用JavaScript或invoketarget来控制弹窗的显示和隐藏。
(无值): 表现和auto一致，不过更为简洁。

举个例子：

<button id="open-popup">打开弹窗</button>

<div id="my-popup" popover>
  <h2>这是一个弹窗</h2>
  <p>你好世界！</p>
  <button popovertarget="my-popup" popovertargetaction="hide">关闭</button>
</div>

这段代码中，my-popup这个div就被标记为了一个弹窗（popover属性）。当点击页面其他地方的时候，弹窗会自动关闭。里面的关闭按钮通过popovertarget="my-popup"和popovertargetaction="hide"来实现，点击可以关闭my-popup这个弹窗。

第三部分：invoketarget 与 popovertarget —— 弹窗控制器的左右护法

接下来，我们来重点说说invoketarget 和 popovertarget，这两个属性是控制弹窗行为的关键。

invoketarget： 用于触发弹窗，通常用在<button>、<a>等元素上。它指向一个拥有id的弹窗元素，并可以通过invoketargetaction属性指定操作。
popovertarget： 也用于触发弹窗，它和invoketarget类似，但是用在弹窗内部，通常用于关闭弹窗。同样，可以通过popovertargetaction属性指定操作。

invoketargetaction 和 popovertargetaction 属性有以下取值：

show：显示弹窗。
hide：隐藏弹窗。
toggle：切换弹窗的显示和隐藏状态。

invoketarget 示例：

<button invoketarget="my-popup" invoketargetaction="toggle">打开/关闭弹窗</button>

<div id="my-popup" popover>
  <h2>这是一个弹窗</h2>
  <p>你好世界！</p>
  <button popovertarget="my-popup" popovertargetaction="hide">关闭</button>
</div>

在这个例子中，点击按钮会切换my-popup的显示/隐藏状态。

popovertarget 示例：

<button id="open-popup" invoketarget="my-popup" invoketargetaction="show">打开弹窗</button>

<div id="my-popup" popover>
  <h2>这是一个弹窗</h2>
  <p>你好世界！</p>
  <button popovertarget="my-popup" popovertargetaction="hide">关闭</button>
</div>

在这个例子中，点击"打开弹窗"按钮会显示弹窗，点击弹窗内部的"关闭"按钮会隐藏弹窗。

第四部分：实战演练——做一个简单的模态框

光说不练假把式，我们来做一个简单的模态框。

<!DOCTYPE html>
<html>
<head>
<title>Modal Demo</title>
<style>
  #my-modal {
    display: none; /* 初始隐藏 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid black;
    padding: 20px;
    z-index: 1000; /* 确保在最上层 */
  }

  #my-modal:popover-open {
    display: block; /* 当弹窗打开时显示 */
  }

  #modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    z-index: 999; /* 在弹窗下方 */
  }

  #modal-overlay:popover-open {
    display: block;
  }
</style>
</head>
<body>

<button invoketarget="my-modal" invoketargetaction="show">打开模态框</button>

<div id="my-modal" popover="manual">
  <h2>模态框标题</h2>
  <p>这是模态框的内容。</p>
  <button popovertarget="my-modal" popovertargetaction="hide">关闭</button>
</div>

<div id="modal-overlay" popover="manual"></div>

</body>
</html>

代码解释：

HTML结构：
- 一个按钮，使用invoketarget属性关联到模态框my-modal，点击时显示模态框。
- 一个div作为模态框，popover="manual"表示手动控制显示/隐藏。
- 一个div作为遮罩层，同样popover="manual"，覆盖整个屏幕，增加视觉效果。
CSS样式：
- #my-modal 初始隐藏，使用position: fixed使其固定在屏幕中央。
- #my-modal:popover-open 当模态框打开时，将其显示出来。
- #modal-overlay 初始隐藏，使用position: fixed使其覆盖整个屏幕，并设置半透明背景。
- #modal-overlay:popover-open 当模态框打开时，显示遮罩层。

第五部分：进阶用法——更多姿势等你解锁

Pop-up API的功能远不止这些，还有很多高级用法等你探索。

嵌套弹窗： 一个弹窗可以包含另一个弹窗，实现更复杂的交互。
动画效果： 可以使用CSS动画为弹窗添加过渡效果，提升用户体验。
表单集成： 弹窗可以包含表单，方便用户输入数据。
自定义样式： 可以根据需求自定义弹窗的样式，使其与网站风格保持一致。

第六部分：兼容性与未来展望

虽然Pop-up API很强大，但目前浏览器的兼容性还不够完美。建议在使用时进行兼容性检测，并使用polyfill进行兼容。

浏览器	支持情况
Chrome	支持
Edge	支持
Firefox	部分支持
Safari	部分支持
移动端浏览器	部分支持

随着浏览器的不断更新，Pop-up API的兼容性会越来越好，最终成为Web开发的标配。

第七部分：popovertargetaction 的更多可能性

虽然我们已经了解了 show、hide 和 toggle 这三个常用的 popovertargetaction 值，但在某些特殊场景下，我们可能需要更细粒度的控制。虽然规范中没有定义其他值，但我们可以结合 JavaScript 来实现更复杂的操作。

例如，我们可能需要一个“重置”按钮，点击后不仅关闭弹窗，还要清除弹窗中的表单数据。

<div id="my-popup" popover>
  <form id="my-form">
    <input type="text" id="name" name="name" value="默认值">
    <button type="button" id="reset-button" popovertarget="my-popup" >重置</button>
  </form>
</div>

<script>
  document.getElementById('reset-button').addEventListener('click', function() {
    document.getElementById('my-form').reset(); // 重置表单
    document.getElementById('my-popup').hidePopover(); // 关闭弹窗
  });
</script>

在这个例子中，我们并没有使用 popovertargetaction 属性，而是通过 JavaScript 来手动重置表单并关闭弹窗。这也说明了，即使有了 Pop-up API，JavaScript 仍然是不可或缺的。

第八部分：inert 属性 —— 增强可访问性

inert 属性也是和 Pop-up API 息息相关的，这个属性可以让一个元素变得“惰性”，简单来说，就是让元素不可交互。

当一个弹窗被关闭时，我们可以使用 inert 属性，使得弹窗中的元素无法被tab键选中，无法被鼠标点击，从而提高页面的可访问性。

<div id="my-popup" popover>
  <h2>这是一个弹窗</h2>
  <p>你好世界！</p>
  <button popovertarget="my-popup" popovertargetaction="hide">关闭</button>
</div>

<script>
  const popup = document.getElementById('my-popup');

  popup.addEventListener('beforetoggle', (event) => {
    if (event.newState === 'open') {
      popup.removeAttribute('inert'); // 打开弹窗时，移除 inert 属性
    } else {
      popup.setAttribute('inert', ''); // 关闭弹窗时，添加 inert 属性
    }
  });
</script>

代码解释：

我们监听了弹窗的 beforetoggle 事件，这个事件会在弹窗显示或隐藏之前触发。
当弹窗即将显示时，我们移除 inert 属性，使得弹窗中的元素可以交互。
当弹窗即将隐藏时，我们添加 inert 属性，使得弹窗中的元素无法交互。

第九部分：使用 ::backdrop 伪元素自定义背景

::backdrop 伪元素允许你自定义弹窗的背景样式。这个伪元素只会出现在全屏弹窗的后面。

#my-popup::backdrop {
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  backdrop-filter: blur(5px); /* 添加模糊效果 */
}

在这个例子中，我们为弹窗的背景添加了半透明的黑色背景和模糊效果。

第十部分：总结与展望

CSS Pop-up API 的 invoketarget 和 popovertarget 属性，为我们提供了一种新的方式来构建Web应用中的弹窗。它们简化了代码，提高了可访问性，并为用户提供了更好的体验。

虽然目前兼容性还不够完美，但随着浏览器的不断更新，Pop-up API 必将成为Web开发的未来趋势。掌握 Pop-up API，将让你在前端开发的道路上更进一步！

今天的讲座就到这里，希望对大家有所帮助。祝大家编码愉快，bug 远离！

发表回复 取消回复

发表回复取消回复