Popver API VS 对话框模态：相同但不同

我正在阅读一些科技新闻博客，偶然发现标题 Popover API 登陆 Baseline。我很困惑，在我最近深入前端开发期间，我最近很难习惯在 HTML 中使用 Elements。在浏览博客时，我一直对到目前为止我如何使用该元素感到困惑。

长话短说

选择对于：

• 需要用户焦点的模态弹出窗口
• 辅助功能和键盘交互

选择弹出窗口：

• 带灯光关闭的非模态弹出窗口
• 用最少的代码轻松实现

元素

根据 MDN 对话框元素

HTML 元素表示模式或非模式对话框或其他交互式组件，例如可关闭的警报、检查器或子窗口。

当网站需要引起用户对重要事物的注意时，通常会在内容上使用和显示 A。即订阅时事通讯、请求（更像是强制）禁用广告拦截器或接受条款和条件。

元素作为模态

由于您可能在多个网站上多次遇到过，其中一些弹出窗口将在整个屏幕上绘制，同时模糊背景或禁用背景并使用户仅将注意力集中在手头的任务上，用户必须关闭（仅在允许的情况下）弹出窗口或输入所需的信息以使其消失。这种行为称为“元素作为模态”。这些模态元素显示在页面的顶层。

//To open dialog as a modal.

dialog.showModal();

// To close the dialog.

dialog.close();

使用 showModal() 方法显示的

元素可以使用 esc 键关闭。键盘用户期望这种行为需要维护并由浏览器提供。如果打开了多个模式对话框，则只有最后一个对话框将使用 esc 键关闭。

作为非模态元素

您可能并不总是希望阻止用户使用您的网页的自然流程，停止执行其他所有操作并专注于您想要显示的内容，但仍然是您的内容，例如 toast 通知、cookie 同意或一般工具提示信息。应出现在页面的顶层，位于用户可以或不能交互的任何其他内容之上。这些类型的弹出窗口称为非模式弹出窗口。用户可以手动关闭它们，或者通常时间会自行消失。这些非模态对话框仍然显示在页面的顶层，但可以使用 z-index 控制它们的优先级，并且模态元素将采用比此更高的 z-index 并使其不可访问。

//To open dialog as a modal.

dialog.show();

// To close the dialog.

dialog.close();

代码示例

一些问题

我很难掌握非模态元素的工作和使用。根据我的说法，非模态元素的行为不一致，需要 Javascript 代码来处理以下情况：

• 没有简单的解雇功能。单击模型外部不会关闭 .
• esc 键不会关闭并且需要 Javascript 来处理该场景。
• 如果你想在顶层绘制，需要手动管理z-index。

令我惊讶的是，popover API 回答或修复了这些问题以及更多......

弹出窗口API

popover 是可以添加到任何 HTML 属性中的属性。这是一个例子。

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

popover 和

之间的主要区别元素

弹出窗口和之间的主要区别elements 的特点是弹出窗口始终是非模态的。 元素带有一个 role=dialog 属性，该角色属性附加到各种 HTML 元素并以某种方式运行。即 h1 具有标题角色 a 具有锚/链接角色。此角色用于确定并帮助屏幕阅读器等辅助技术确定元素。但是，弹出框是 HTML 元素的一个属性，因为它没有附加默认角色。这有助于

在上面的示例中要隐藏，直到单击按钮。

popover 属性可以用最少的代码来使用，虽然它可以使用 Javascript 进行控制，但并不像

那样始终需要。

popover 可以有 2 个特征：
1.popover=auto：具有轻解功能，无需JS交互。
2.popover=manual：需要Javascript交互，例如单击按钮或计时器来显式关闭它。

popover 始终显示在顶层，无需显式设置 z-index。

代码示例：

你可以看到我几乎不需要 Javascript 代码就可以实现相同的行为。设计和管理各种弹出窗口变得更加容易。

一些设计注意事项

popover 可以有：使用 CSS 设置背景，可用于模糊或灰色 popover 的背景，但这不会消除它的光消除功能，并且如果 pop- 则用户仍然可以单击外部并与网页的其他元素进行交互。在确定何时选择弹出框而不是

时，您应该非常小心。

这里要考虑的主要问题是：正在显示的组件是目前唯一应该获得焦点的东西吗？可以允许用户与其他东西交互吗？

结论

总之，元素和弹出窗口 API 提供了在 Web 应用程序中创建交互式弹出窗口的多种选项。通过了解它们的独特特征和用例，您可以做出明智的决策，以增强用户体验并简化您的开发流程。

参考

1. 比较 Popover API 和元素
2. 对话框和弹出窗口看起来很相似。它们有何不同？
3. Popover API 登陆 Baseline

以上是Popver API VS 对话框模态：相同但不同的详细内容。更多信息请关注PHP中文网其他相关文章！