如何停止以图像模式显示的所有图像？

我正在创建一个图像库，它显示图像的模态和点击时的一些附加信息。数据来自嵌入的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 mod al = 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"; 
}

来源

2017-08-07 Gerrard

这就是我用CSS做的。

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

    </html>

您正在将modal.style.display =“block”。我建议你将它改为无。

来源

2017-08-07 16:19:29

谢谢@ Samanja09我不认为我清楚自己想要什么。我已经使jsfiddle更清晰 - [链接]（https://jsfiddle.net/q8og8pmx/）。你会看到，当你点击一个图像时，你会在模态中获得更大的版本，但也会得到下面的其他图像。我想要隐藏这些图像。将modal.style.display设置为“none”会隐藏整个模式。 – Gerrard

如何停止以图像模式显示的所有图像？

回答

相关问题