如何停止以圖像模式顯示的所有圖像？

我正在創建一個圖像庫，它顯示圖像的模態和點擊時的一些附加信息。數據來自嵌入的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

如何停止以圖像模式顯示的所有圖像？

回答

相關問題