Javascript 一键获取模态图像

我尝试制作脚本，例如： 我从sql表的id中获取图像，并获取列表图像

图像1 |图像2 |图像3

当我单击Image1时，我尝试在模式中显示此图像。我有示例脚本，但当我单击image2时，我无法获取图像并单击。只是为Image1工作 有什么帮助吗

我的示例脚本：

调用函数：->

<img src="<?php echo $product_array[$key]["image"]; ?>" style="max- 
           width:100px;max-height:75px;" id="myImg"></div>
        <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
        </div>

“style=“max-
宽度：100px；最大高度：75px；“id=”myImg“>
&时代；

CSS样式：

<script>
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() { 
    modal.style.display = "none";
}
</script>

#myImg{
边界半径：5px；
光标：指针；
过渡：0.3s；
}
#myImg:悬停{不透明度：0.7；
}
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
}
.模态内容{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
}
#标题{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
文本对齐：居中；
颜色：#ccc；
填充：10px0；
高度：150像素；
}
.模式内容#标题{
-webkit动画名称：缩放；
-webkit动画持续时间：0.6s；
动画名称：缩放；
动画持续时间：0.6s；
}
@-webkit关键帧缩放{
来自{-webkit变换：缩放（0）}
到{-webkit转换：缩放（1）}
}
@关键帧缩放{
来自{transform:scale（0）}
到{变换：比例（1）}
}
.结束{
背景：红色；
位置：绝对位置；
顶部：63px；
右：275px；
颜色：#f1f1；
字体大小：40px；
字体大小：粗体；
过渡：0.3s；
}
.关闭：悬停，
.结束：聚焦{
颜色：#bbb；
文字装饰：无；
光标：指针；
}
@仅介质屏幕和（最大宽度：700px）{
.模态内容{
宽度：100%；
}
}

以及我如何将另一个图像放到同一个id中，示例如下：

图1 |图2 |图3

---

我单击Image1并在modal show me（1）、2、3图像中获取模态和下半边，然后单击（2）只需停留在模式中，并将此图像更改为id Image1，将第二个图像更改为id Image1…可能任何人都理解我。对不起，我的语言。

如果您想在每个图像中打开相同的模型，请单击，然后使用

类

而不是使用

id

。 或者，如果您想在每个图像上打开不同的模型，请单击，然后您必须创建单独的模型，其中包含id，如myModal1、myModal2……和图像id，如myImg1、myImg2。。 之后，您必须编写代码来检测图像点击的次数，根据该次数您必须打开模型

<style>

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */

}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

.close {
    background:red;
    position: absolute;
    top: 63px;
    right: 275px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>