多个Javascript模态

尝试创建一个包含多个图片的页面，当您单击每个图片时，它会使用模式放大。这段代码对一张图片非常有效，但当我添加了更多的图片时，只有第一张有效。请告知

//放大效果
//获取模态
var modal=document.getElementById（'myModal'）；				
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementById（'myImg'）；					
var modalImg=document.getElementById（“img”）；					
var captionText=document.getElementById（“caption”）；		
img.onclick=function（）{
modal.style.display=“块”；
modalImg.src=此.src；
modalImg.alt=this.alt；
captionText.innerHTML=this.alt；
}
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}

#myImg{
光标：指针；
过渡：0.3s；
边框左上半径：20px；
边框右上角半径：20px；
边框：3px实心#7DAFE7；
}
#myImg:悬停{
不透明度：0.7；/*将鼠标移到图像上时图像的变化量*/
边框：3px实心#137709；
}
/*模态（背景）*/
.莫代尔{
显示：无；/*？*/*默认情况下隐藏*/
位置：固定；/*？*//*保持原位*/
z指数：1；/*？*/*位于顶部*/
填充顶部：100px；/*像素缩放的图像来自屏幕顶部*/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*？不确定为什么有2种背景色*//*后备色*/
背景色：rgba（0,0,0,0.9）；/*黑色w/不透明度*/
}
/*模态内容（图像）*/
.模态内容{
保证金：自动；
显示：块；
宽度：80%；/*图片内部的宽度*/
最大宽度：700px；
}
/*模态图像字幕*/
#标题{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
文本对齐：居中；
颜色：#ccc；
填充：10px0；
高度：150像素；
}
/*添加动画*/
.模式内容#标题{
-webkit动画名称：缩放；
-webkit动画持续时间：0.6s；
动画名称：缩放；
动画持续时间：0.6s；
}
@-webkit关键帧缩放{
来自{-webkit变换：缩放（0）}
到{-webkit转换：缩放（1）}
}
@关键帧缩放{
来自{transform:scale（0）}
到{变换：比例（1）}
}
/*关闭按钮*/
.结束{
位置：绝对位置；
顶部：15px；
右：35px；
颜色：#f1f1；
字体大小：40px；
字体大小：粗体；
过渡：0.3s；
字体系列：“Gill Sans”、“Gill Sans MT”、“Myriad Pro”、“DejaVu Sans Condensed”、Helvetica、Arial、Sans serif；
}
.关闭：悬停，
.结束：聚焦{
颜色：#bbb；
文字装饰：无；
光标：指针；
}
.图片{
宽度：100%；
/*背景色：#0200FF*/
左：5%；
右：5%；
垫面：5%；
位置：相对位置；
}
.图片{
宽度：90%；
}

X
X

您需要将事件侦听器附加到每个元素，因为存在多个实例。此外，在创建一个元素的多个实例时，最好使用类而不是ID（除非@mmm建议它们是唯一的）

//放大效果
//获取模态
var modal=document.getElementById（'myModal'）；				
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementsByClassName（'imgPicture'）；					
var modalImg=document.getElementById（“img”）；					
var captionText=document.getElementById（“caption”）；		
对于（var i=0；i
modalImg.alt=this.alt；
captionText.innerHTML=this.alt；
});
}
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}

#myImg{
光标：指针；
过渡：0.3s；
边框左上半径：20px；
边框右上角半径：20px；
边框：3px实心#7DAFE7；
}
#myImg:悬停{
不透明度：0.7；/*将鼠标移到图像上时图像的变化量*/
边框：3px实心#137709；
}
/*模态（背景）*/
.莫代尔{
显示：无；/*？*/*默认情况下隐藏*/
位置：固定；/*？*//*保持原位*/
z指数：1；/*？*/*位于顶部*/
填充顶部：100px；/*像素缩放的图像来自屏幕顶部*/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*？不确定为什么有2种背景色*//*后备色*/
背景色：rgba（0,0,0,0.9）；/*黑色w/不透明度*/
}
/*模态内容（图像）*/
.模态内容{
保证金：自动；
显示：块；
宽度：80%；/*图片内部的宽度*/
最大宽度：700px；
}
/*模态图像字幕*/
#标题{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
文本对齐：居中；
颜色：#ccc；
填充：10px0；
高度：150像素；
}
/*添加动画*/
.模式内容#标题{
-webkit动画名称：缩放；
-webkit动画持续时间：0.6s；
动画名称：缩放；
动画持续时间：0.6s；
}
@-webkit关键帧缩放{
来自{-webkit变换：缩放（0）}
到{-webkit转换：缩放（1）}
}
@关键帧缩放{
来自{transform:scale（0）}
到{变换：比例（1）}
}
/*关闭按钮*/
.结束{
位置：绝对位置；
顶部：15px；
右：35px；
颜色：#f1f1；
字体大小：40px；
字体大小：粗体；
过渡：0.3s；
字体系列：“Gill Sans”、“Gill Sans MT”、“Myriad Pro”、“DejaVu Sans Condensed”、Helvetica、Arial、Sans serif；
}
.关闭：悬停，
.关闭：focu