摘要：在本教程中，您将学习如何使用 JavaScript 弹出式 API 在网页上其他元素之上显示弹出式内容。
JavaScript 弹出式 API 简介
Popover API 是一种标准方法，用于在其他页面元素之上显示弹出式内容。有两种方法可以控制弹出式内容
- 声明 HTML 属性。
- 使用 JavaScript。
声明式弹出式
要将 HTML 元素设置为弹出式内容，您需要向其添加 popover 和 id 属性
<div id="popover" popover>This is a popover</div>Code language: JavaScript (javascript)在此语法中
popover属性隐式地将display属性设置为none，这会导致元素在页面加载时被隐藏。id用于将弹出式元素与其控件关联，该控件可以是按钮。
要显示或隐藏弹出式，您需要另一个元素，该元素可以是 button 或 input，其类型为 button。此外，您需要将按钮的 popovertarget 属性设置为弹出式的 id。例如
<div id="popover" popover>This is a popover</div>
<button popovertarget="popover">Show/Hide the popover</button>Code language: JavaScript (javascript)现在，如果您单击按钮，它将显示弹出式，如果您再次单击按钮，它将隐藏弹出式。弹出式的默认行为是切换
您可以通过将按钮的 popovertargetaction 属性设置为 hide、show 或 toggle 来更改弹出式元素的行为。例如
<div id="popover" popover>This is a popover</div>
<button popovertarget="popover" popovertargetaction="show">Show popover</button>
<button popovertarget="popover" popovertargetaction="hide">Hide popover</button>Code language: HTML, XML (xml)请注意，如果您没有指定 popovertargetaction 属性，它的默认值为 toggle，当您重复单击按钮时，它将显示和隐藏弹出式元素。
弹出式状态
当您向 HTML 元素添加 popover 属性时，其状态默认设置为 auto。这意味着以下代码片段是等效的，具有相同的效果
<div id="popover" popover>This is a popover</div>Code language: JavaScript (javascript)和
<div id="popover" popover="auto">This is a popover</div>Code language: JavaScript (javascript)如果弹出式处于自动状态，它将按如下方式运行
- 单击弹出式元素之外将隐藏它。这被称为“光线关闭”。
- 按下
ESC键也会隐藏弹出式。 - 一次只能显示一个弹出式，显示第二个弹出式将隐藏第一个弹出式。
自动状态弹出式在一次显示单个弹出式时很有用。例如，您可能希望显示一条消息，指示 API 调用的结果。
弹出式还有另一个状态，即 manual 状态。以下代码将 manual 状态设置为弹出式元素
<div id="popover" popover="manual">This is a popover</div>Code language: HTML, XML (xml)在此 manual 状态中
- 弹出式无法“光线关闭”。
- 可以同时显示多个独立的弹出式。
以下页面显示了如何同时显示两个弹出式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popover</title>
<style>
:popover-open {
position: absolute;
inset: unset;
top: 50px;
}
#popover1 {
left: 10px;
}
#popover2 {
left: 150px;
}
</style>
</head>
<body>
<button type="button" popovertarget="popover1">Toggle popover 1</button>
<button type="button" popovertarget="popover2">Toggle popover 2</button>
<div id="popover1" popover="manual">This is popover 1</div>
<div id="popover2" popover="manual">This is popover 2</div>
</body>
</html>Code language: HTML, XML (xml)通过 JavaScript 控制弹出式
要检查 Web 浏览器是否支持弹出式 API，您可以使用 HtmlElement 的 popover 属性，如下所示
const isPopoverSupported = () => HTMLElement.prototype.hasOwnProperty("popover");Code language: JavaScript (javascript)HtmlElement 对象具有以下控制弹出式的 methods
| 弹出式方法 | 描述 |
|---|---|
showPopover() | 显示弹出式 |
hidePopover() | 隐藏弹出式 |
togglePopover() | 切换弹出式 |
以下页面显示了如何通过按下 h 键在 JavaScript 中切换弹出式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript Popover API example</title>
<style>
:popover-open {
position: absolute;
inset: unset;
top: 5px;
right: 5px;
}
@media all and (max-width: 450px) {
:popover-open {
left: 5px;
}
}
</style>
</head>
<body>
<p>Press the letter <strong>h</strong> to toggle the popover.</p>
<div id="message" popover>This is a popover</div>
<script>
const isPopoverSupported = () => HTMLElement.prototype.hasOwnProperty("popover");
if (isPopoverSupported()) {
document.addEventListener("keydown", (event) => {
if (event.key === "h") {
message.togglePopover();
}
});
}
</script>
</body>
</html>Code language: HTML, XML (xml)它的工作原理。
首先，声明一个带有 id message 和属性 popover 的弹出式元素
<div id="message" popover>This is a popover</div>Code language: HTML, XML (xml)其次，定义一个箭头函数，如果支持 Popover API，则返回 true
const isPopoverSupported = () => HTMLElement.prototype.hasOwnProperty("popover");Code language: JavaScript (javascript)第三，检查是否支持 Popover API
if (isPopoverSupported()) {Code language: JavaScript (javascript)最后，添加 事件监听器，当用户按下 h 键时，它将切换弹出式
document.addEventListener("keydown", (event) => {
if (event.key === "h") {
message.togglePopover();
}
});Code language: JavaScript (javascript)弹出式 CSS
示例页面显示了屏幕右上角的弹出式。这是因为我们使用的 CSS 类。
当弹出式显示时，它具有一个 :popover-open 伪类，您可以使用它来设置弹出式元素的样式。
此外，您可以使用 ::backdrop 伪元素，它是一个直接放置在弹出式元素后面的全屏元素。这使您能够向弹出式后面的页面内容添加效果。
以下页面说明了如何使用 ::backdrop 伪元素使背景模糊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript Popover API background example</title>
<style>
body {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22black%22/%3E%3Crect%20x%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22white%22/%3E%3Crect%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22white%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22black%22/%3E%3C/svg%3E");
background-repeat: repeat;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.8;
}
button {
margin: 5px 0 0 5px;
}
:popover-open {
width: 300px;
height: 200px;
padding: 0 10px;
border-radius: 10px;
}
::backdrop {
backdrop-filter: blur(3px);
}
</style>
</head>
<body>
<button popovertarget="message" popovertargetaction="show">
Show popover
</button>
<div id="message" popover>
<h2>Popover heading</h2>
<p>
This is a popover with a blur page content.
</p>
</div>
</body>
</html>Code language: HTML, XML (xml)摘要
- 向元素添加
popover属性以使其成为弹出式。 - 使用
popovertargetaction属性定义操作，例如toggle、show和hide目标弹出式元素。 - 使用
popovertarget指定控制元素（如按钮）的弹出式元素的 id。 - 使用
showPopover()、hidePopover()和togglePopover()方法显示、隐藏和切换弹出式。
本教程是否有用？
