如何停止在图像模式中显示的所有图像？答案

【问题标题】：How to stop all images displaying in an image modal?如何停止在图像模式中显示的所有图像？
【发布时间】：2018-01-14 15:26:42
【问题描述】：

我正在创建一个图片库，它会在单击时显示图像的模式和一些附加信息。数据来自嵌入的 json 字符串。模态框在大框架中显示正确的图像，但也在下方显示其他图像。如何防止显示其他图像？

非常感谢！

这是 JSON：

var json = [{"User_Name":"John Doe","score":"10","team":"1","img":"https://img1.etsystatic.com/029/0/9428797/il_340x270.597883049_nole.jpg"},{"User_Name":"Jane Smith","score":"15","team":"2","img":"https://img1.etsystatic.com/035/1/9428797/il_340x270.597881301_g3hw.jpg"},{"User_Name":"Chuck Berry","score":"12","team":"2","img":"https://img0.etsystatic.com/026/0/9428797/il_340x270.597777722_o6wf.jpg"}];

这是 HTML：

<div id="newTable">
 <a href=""></a>
</div>

<div id="myModal" class="modal">
 <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
 <img class="modal-content" id="img01">
</div>

这是将 JSON 放入 div 中：

$(document).ready(function () {
    var figure;
    for (var i = 0; i < json.length; i++) {
        figure = $('<a/>');
        figure.append("<a>"+ " <img src='"+ json[i].img+"'/>" + "</a>");
        figure.append("<a>" + json[i].User_Name + "</a>");
        figure.append("<tag>" + " " + json[i].User_Name + " " + json[i].score + " " + json[i].team + " " + "</tag>");
        $('div').append(figure);
    }
});

这是模态：

var modal = document.getElementById('myModal');

var modalImg = $("#img01");

$(document).ready(function(){    
 $("img").click(function(){
  modal.style.display = "block";
  var newSrc = this.src;
  modalImg.attr('src', newSrc);
  }); 
});   

var span = document.getElementsByClassName("close")[0];

span.onclick = function() {
 modal.style.display = "none";
}

【问题讨论】：

标签： javascript html json modal-dialog gallery

【解决方案1】：

这就是我对 CSS 所做的。

    <html>
    #modal{
    display: none;
    width: 100%;
    height:100%;
    position:absolute;
    top:0;
    }

    </html>

您正在放置 modal.style.display="block"。我建议您将其更改为无。

【讨论】：

谢谢@Samanja09 我想我不清楚我想要什么。我做了一个更清晰的 jsfiddle - link。您会看到，当您单击图像时，您会在模态中获得更大的版本，但也会看到下面的其他图像。我希望隐藏这些图像。将 modal.style.display 设置为“none”会隐藏整个模态。