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

新的 Popover API：无需 JavaScript 即可轻松实现 Popover

Popover API 简化了 popover 的创建，消除了对 JavaScript 库或手动编码的需要。 跨主要浏览器支持，非常容易实现。

了解 Popover API

这个新标准简化了显示弹出窗口、自动处理打开、关闭和可访问性注意事项的过程。 开发者不再需要独立管理这些状态。

创建弹出窗口

基本实现

以下是创建基本弹出窗口的方法：

1. 在 HTML 中创建一个按钮来触发弹出窗口。
2. 在按钮上使用 popover-target 属性，通过共享 ID（例如 popover）将其链接到元素。
3. 使用相同的 ID 将 popover 属性应用于要用作弹出窗口的 HTML 元素。

仅此而已！单击该按钮将打开弹出窗口，当您单击外部（轻关闭）时，它会自动关闭。此切换功能是默认行为。

添加关闭按钮

您可以在弹出窗口中添加关闭按钮。 为该按钮提供适当的 popover-target 属性并显式定义 hide 操作。 一点 CSS 会增强它的外观。

弹出模式

弹出窗口默认为“自动”模式：

1. 打开弹出窗口会关闭所有其他打开的弹出窗口。
2. 轻微消除已启用。

切换到“手动”模式可防止自动关闭其他弹出窗口并禁用灯光关闭。您需要显式管理弹出窗口的打开和关闭。

设计弹出框

使用背景元素

backdrop 元素特别有用；当弹出窗口打开时，它会覆盖页面的其余部分。

<code class="language-css">[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;
}

/* ... other CSS ... */</code>

这样可以轻松设置背景样式，将注意力集中在弹出窗口上。

Popover 与 Modal

了解弹出窗口不是模态框是至关重要的：

1. 弹出窗口不会禁用与页面其余部分的交互。
2. 当弹出窗口打开时，您仍然可以单击其他元素。

对于需要用户交互才能继续操作的模式，请使用 dialog.showModal() 代替。 这将需要一些 JavaScript，但它提供了真正的模式功能。

增强 Popover 样式

使用对话元素

popover 属性本身是非语义的，允许您为弹出窗口使用 HTML <dialog> 元素。

添加更多内容并应用 CSS

添加更多内容（按钮等）和 CSS 样式（字体系列、填充、颜色等）进一步增强了弹出框的外观。 该示例展示了如何设置主按钮的样式以获得更美观的外观。

将 JavaScript 与 Popover 结合使用

虽然 API 无需 JavaScript 即可简化弹出窗口的创建，但您仍然可以使用 JavaScript 进行更高级的控制（例如 showPopover）。

结论

Popover API 提供了一种简化的方法，可以用最少的代码创建优雅且易于访问的 popover。 欢迎您的反馈！ 考虑喜欢或关注更多这样的内容。

关注我：LinkedIn | 中 | 蓝天

以上是Popover API：使用 HTML 创建本机弹出窗口 - 无需 JavaScript的详细内容。更多信息请关注PHP中文网其他相关文章！