在图像单击时显示弹出窗口

Posted 2023-03-27

【中文标题】在图像单击时显示弹出窗口

【英文标题】：Showing popup on image click

【发布时间】：2021-04-26 18:05:01

【问题描述】：

我正在使用此代码来显示图像。 问题是它只显示第一张图像而不是其余图像的弹出窗口。 图像是从数据库加载的，因此它们都具有相同的 id。 是这个问题还是别的什么？

代码：

        if (ViewBag.ReceptiSearchAll != null)
        

            <div class="col-6 col-lg">
               @foreach (var images in ViewBag.ReceptiSearchImages)
                                                              

                    if (images.Image != null)
                    
                        imagePath = images.Image;
                    
                    else
                    
                        imagePath = images.ImageDefault;
                    

                    <div class="card mb-3" style="max-width: 400px;border:none">
                        <div class="row no-gutters">
                            <div class="col-md-12">

                                <img id="imgrec" class="card-img-top" src="data:image;base64,@System.Convert.ToBase64String(imagePath)"   >

                            </div>
                        </div>
                    </div>
                
            </div>
        


<script>
    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById("imgrec");
    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;
    

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function () 
        modal.style.display = "none";
    
</script>


     

【参考方案1】：

您所有的图片都有相同的 id。

id 是唯一的标识符。

var img = document.getElementById("imgrec");

因此，只有您的第一张图片会得到这个。

img.onclick = function () 
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;