Javascript 如何在不同的按钮单击上管理多个覆盖？

function toggleOverlay_1（）{
var overlay=document.getElementById（'overlay'）；
var specialBox=document.getElementById（'specialBox_1'）；
overlay.style.opacity=.8；
if（overlay.style.display==“块”）{
overlay.style.display=“无”；
specialBox.style.display=“无”；
}否则{
overlay.style.display=“块”；
specialBox.style.display=“块”；
}
}
函数toggleOverlay_2（）{
var overlay=document.getElementById（'overlay'）；
var specialBox=document.getElementById（'specialBox_2'）；
overlay.style.opacity=.8；
if（overlay.style.display==“块”）{
overlay.style.display=“无”；
specialBox.style.display=“无”；
}否则{
overlay.style.display=“块”；
specialBox.style.display=“块”；
}
}

div#覆盖{
显示：无；
z指数：2；
背景：#000；
位置：固定；
宽度：100%；
身高：100%；
顶部：0px；
左：0px；
文本对齐：居中；
}
分区#专用箱1{
显示：无；
位置：固定；
z指数：3000；
身高：100%；
宽度：100%；
背景：#FFF；
颜色：#000；
}
分区#专用箱2{
显示：无；
位置：固定；
z指数：3000；
身高：100%；
宽度：100%；
背景：#FFF；
颜色：#000；
}
div#wrapper{
位置：绝对位置；
顶部：0px；
左：0px；
左侧填充：24px；
}
.关闭{
位置：绝对位置；
最高：0%；
右：45px；
字体大小：40px；
}

因为您的目标是具有ID的div，DOM将获取具有该ID的第一个div（您的第一个视频）。因此，您必须以另一个ID作为第二个覆盖的目标。

这里有一个重建选项，我觉得这可能比为每个视频制作所有javascript更容易

//这部分不需要，但我添加了它，以防您需要它
//得到情态动词
var modal=document.getElementById（'id01'）；
var modal2=document.getElementById（'id02'）；
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
如果（event.target==modal2）{
modal2.style.display=“无”；
}
}

.modal{
z指数：3；
显示：无；
填充顶部：100px；
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）
}
.模态内容{
保证金：自动；
背景色：#fff；
位置：相对位置；
填充：0；
大纲：0；
宽度：600像素
}
.集装箱{
填充：0.01em 16px
}
.关闭{
文字装饰：无；
浮动：对；
字体大小：30px；
字体大小：粗体；
}
.closebtn:悬停，
.closebtn:焦点{
颜色：红色；
光标：指针
}

打开视频1
开放视频2
&时代；
&时代；

基于您的html和jquery。这是你需要做的。而不是制作两个函数。将iframe id作为参数

toggleOverlay（playerid）

保留一个用于切换的函数。因为视频iframe id的父div是specialbox，specialbox父项是覆盖层本身。可以利用jquery的.parent（）方法进行设置

function toggleOverlay(playerid){
  $("#" + playerid).parent("#specialBox").parent().css("opacity",".8");
  $("#" + playerid).parent("#specialBox").parent().toggle();
  $("#" + playerid).parent("#specialBox").toggle();
}

现在，在按钮或任何调用toggleOverlay函数的地方，添加唯一的playerid作为参数，并根据哪个按钮处理哪个覆盖设置

此外，您不能有两个ID相同的div。因此，将第二个overlay div id更改为“overlay2”

下面是一个工作示例：

---

如果您让代码在JSFIDLE之类的平台上运行，那么对贡献者来说就更容易了。@PaulBGD我做到了！感谢RickSo，我应该将id=“overlay”更改为不同的id吗？@SailiG id应该总是不同的。因此，一个可以是

id=“overlay”

另一个

id=“overlay2”

谢谢@Rick。但是我想使用VimeoAPI并使代码像这样运行-。我需要全屏播放视频。当我单击视频覆盖右侧的小“X”按钮时，我希望覆盖被隐藏，视频暂停然后卸载。我最小化了一些代码。这里有一个实时预览：我工作的环境无法加载视频，这只是一个错误，因此请告诉我脚本是否仍在您这边工作。我尝试通过在我的src中添加autoplay=1来自动播放视频。但是所有的视频都会在背景中循环播放，即使覆盖层关闭了。你能告诉我如何解决这个问题吗？你想用autoplay实现什么。请注意，我们已经根据自定义需要自定义了视频播放和停止，因此如果您想在某些情况下自动播放视频，则必须将其放入jquery代码中的适当位置。我不推荐使用autoplay查询参数，因为它会在页面加载后立即启动视频播放器，即使覆盖未显示。如果您希望在单击apply overlay按钮后立即开始播放视频，请在toggleOverlay函数的末尾添加以下行：$f（$（“#”+playerid）[0]）.api（'play'）；