我想创建多个模式,显示带有不透明黑色背景的图像特写。第一个模式" landscape_img_1"工作得很好。但是,第二个模态可以工作,但只有不透明的黑色背景而没有图像。我在这做错了什么?
<div id="myModal_1" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<div id="myModal_2" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img02">
</div>
<script>
// Modal function 1
var modal = document.getElementById("myModal_1");
var img = document.getElementById("landscape_img_1");
var modal_img = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modal_img.src = this.src;
}
// Modal function 2
var modal_2 = document.getElementById("myModal_2");
var img_2 = document.getElementById("landscape_img_2");
var modal_img_2 = document.getElementById("img02");
img_2.onclick = function(){
modal.style.display = "block";
modal_img_2.src = this.src;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function(){
modal.style.display = "none";
}
</script>