我们使用document添加了一个点击事件监听器，来判断点击事件的目标元素是否位于弹窗内部（videoPopup）以及是否不是 “打开弹窗” 按钮。只有当点击事件的目标元素不在弹窗内部且不是 “打开弹窗” 按钮时，才会触发关闭弹窗的逻辑。
这样，当你点击video-popup-container区域以外的任何地方时，弹窗都会关闭。
截图
演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5视频弹窗示例</title>
<style>
img{
max-width: 100%;
}
button{
border: none;
background: none;
cursor: pointer;
}
#open-popup{
padding: 10px 20px;
background: #000;
color: #FFF;
border-radius: 5px;
}
#video-popup-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明的灰色背景 */
justify-content: center;
align-items: center;
z-index: 1000; /* 确保遮罩位于其他内容之上 */
}
#video-popup {
width: 800px;
position: relative;
}
#close-popup {
position: absolute;
top: -50px;
right: -30px;
width: 50px;
}
#close-popup:hover img{
opacity: .8;
}
</style>
</head>
<body>
<button id="open-popup">打开弹窗</button>
<div id="video-popup-container">
<div id="video-popup">
<video id="video" controls width="100%" height="100%">
<source src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-720p.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="close-popup"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFJGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OSwgMjAyMy8wNi8yNS0yMDowMTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjAgKDIwMjMwODIwLm0uMjI5NiBjNjFjM2E1KSAgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0wOC0yOFQxMTozOTowNCswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMDgtMjhUMTE6Mzk6MjErMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMDgtMjhUMTE6Mzk6MjErMDg6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmI5ZmZlNzhmLTM1MDMtM2U0My1hZWJiLTYwYTgx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" alt=""></button>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const openPopupButton = document.getElementById("open-popup");
const closePopupButton = document.getElementById("close-popup");
const videoPopupContainer = document.getElementById("video-popup-container");
const videoPopup = document.getElementById("video-popup");
const video = document.getElementById("video");
openPopupButton.addEventListener("click", function () {
videoPopupContainer.style.display = "flex";
video.play();
});
closePopupButton.addEventListener("click", function () {
closePopup();
});
document.addEventListener("click", function (event) {
if (!videoPopup.contains(event.target) && event.target !== openPopupButton) {
closePopup();
}
});
function closePopup() {
videoPopupContainer.style.display = "none";
video.pause();
}
});
</script>
</body>
</html>
正文完
要饭中，多少给点吧（支付宝)
