Javascript 单击外部时如何隐藏嵌入式视频弹出窗口？

我有这个代码，但我不知道如何隐藏视频时，点击外面

这是我的密码：

$（“.popup”）。单击（函数（）{
var$this=$（this）；
var$iframe=$（“”）attr（“src”），$this.data（“link”）.css（{“宽度”：400，“高度”：300}）；
var$title=$（“”）.text（$this.data（“title”）；
$（“#视频视图”）.html（$title）.append（$iframe）；
$iframe.wrap（“”）；
});
诀窍是在所有屏幕上添加一个隐藏层。当用户单击该层时，您将隐藏电影

请注意
z-index
，这很重要

像这样：


$（“.popup”）。单击（函数（）{
var$this=$（this）；
var$iframe=$（“”）attr（“src”），$this.data（“link”）.css（{“宽度”：400，“高度”：300}）；
var$title=$（“”）.text（$this.data（“title”）；
$（“#视频视图”）.html（$title）.append（$iframe）；
$iframe.wrap（“”）；
$（'.overlay'）.show（）；
});
$（'.overlay'）。单击（函数（）{
$（this.hide（）；
$（'#视频视图'）.html（''）；
});
#视频视图{
z指数：2；
位置：相对位置；
显示：内联块；
}
.覆盖{
位置：绝对位置；
z指数：1；
排名：0；
左：0；
宽度：100%；
身高：100%；
显示：无；
}
此示例在单击图像时显示视频，在单击其他位置时隐藏：


$（“.popup”）。单击（函数（e）{
e、 停止传播（）；
var$this=$（this）；
var$iframe=$（“”）attr（“src”），$this.data（“link”）.css（{“宽度”：400，“高度”：300}）；
var$title=$（“”）.text（$this.data（“title”）；
$（“#视频视图”）.html（$title）.append（$iframe）；
$iframe.wrap（“”）；
});
$（文档）。单击（函数（）{
$（“#视频视图”）.empty（）；
});

那么，当您在课堂视频之外单击时，是否要隐藏课堂视频？您可以在正文中附加一个click事件，检查类视频是否存在，然后通过将css设置为display none来隐藏它。但你为什么想要这种行为？有一个关闭按钮不是更好吗？它也可以是一个关闭按钮，请容忍我，因为我是初学者，我可能会说一些愚蠢的话。关闭按钮也可以位于打开它的图像上。你能给我举一个例子来说明你的意思吗？非常感谢Fabian，这非常有效，正是我所需要的：）@Alina在这个特殊的例子中，它的工作是因为iframe。如果弹出窗口为
div
，则每当您在弹出窗口中单击时，它将关闭弹出窗口。想一想，如果你想要这个。（在
div
上演示，单击弹出窗口关闭弹出窗口：）