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

长话短说

选择：

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

选择弹出窗口：

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

元素

根据 MDN Dialog 元素

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

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

元素作为模态

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

//To open dialog as a modal.

dialog.showModal();

// To close the dialog.

dialog.close();

元素可以使用 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 属性的属性。这是一个例子。

Toggle the popover
Popover content

popover 和

元素之间的主要区别

popover 和