Popver API VS 对话框模态：相同但不同-js教程-PHP中文网

Popver API VS dialog Modal : Same Same but Different

我正在阅读一些科技新闻博客，偶然发现标题 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。