[英]Why when I click on the second image it doesn't pop up as the first one?
I been trying to figure out how to make the second image appear with the effect of pop up when I click on it. 我试图弄清楚如何使第二个图像在单击时具有弹出效果。 the second image has exactly the same code of the first, and even with that doesn't make the same pop-up effect.
第二张图片的代码与第一张图片完全相同,即使这样也不会产生相同的弹出效果。 I'm sorry for my bad English I'm from Japan, I would appreciate some help guys.
对于我来自日本的英语不好,我感到抱歉。我会感谢一些帮助的人。
#myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } }
<h2>Image Modal</h2> <p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p> <p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p> <img id="myImg" src="https://cdn.theatlantic.com/assets/media/img/mt/2017/06/GettyImages_675371680/lead_960.jpg?1498239007" alt="Trolltunga, Norway" width="300" height="200"> <img id="myImg" src="https://cdn.theatlantic.com/assets/media/img/mt/2017/06/GettyImages_675371680/lead_960.jpg?1498239007" alt="Trolltunga, Norway" width="300" height="200"> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="img01"> <div id="caption"></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('myImg'); 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>
You should never set the same ID in different elements. 您永远不要在不同的元素中设置相同的ID。 The ID should be unique.
该ID应该是唯一的。 When you are using
var img = document.getElementById('myImg');
使用
var img = document.getElementById('myImg');
You are only selecting the first element. 您仅选择第一个元素。
Solution 解
One way you can do it is setting the same class to both elements. 一种方法是将相同的类设置到两个元素。
<img class="images" id="myImg" src="https://cdn.theatlantic.com/assets/media/img/mt/2017/06/GettyImages_675371680/lead_960.jpg?1498239007" alt="Trolltunga, Norway" width="300" height="200">
<img class="images" id="myImg" src="https://cdn.theatlantic.com/assets/media/img/mt/2017/06/GettyImages_675371680/lead_960.jpg?1498239007" alt="Trolltunga, Norway" width="300" height="200">
Now you can get both elements with getElementsByClassName
. 现在,您可以使用
getElementsByClassName
获得这两个元素。
You will get an HTML Collection so you need to parse it to an Array.
您将获得一个HTML集合,因此您需要将其解析为一个数组。
var imagesCollection = document.getElementsByClassName('images');
var imagesArray = Array.prototype.slice.call( imagesCollection );
Last step is give it a name to the onclick handler so you can set it in both elements with map
最后一步是给它一个onclick处理程序的名称,以便您可以在
map
两个元素中进行设置
function imageOnClickHandler(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
imagesArray.map(function (img){
img.onclick = imageOnClickHandler;
})
Full Source Code 完整的源代码
#myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } }
<h2>Image Modal</h2> <p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p> <p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p> <img class="images" id="myImg" src="https://cdn.theatlantic.com/assets/media/img/mt/2017/06/GettyImages_675371680/lead_960.jpg?1498239007" alt="Trolltunga, Norway" width="300" height="200"> <img class="images" id="myImg" src="https://cdn.theatlantic.com/assets/media/img/mt/2017/06/GettyImages_675371680/lead_960.jpg?1498239007" alt="Trolltunga, Norway" width="300" height="200"> <link rel="stylesheet" href="/playground/modal.css"> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="img01"> <div id="caption"></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 imagesCollection = document.getElementsByClassName('images'); var imagesArray = Array.prototype.slice.call( imagesCollection ) var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); imagesArray.map(function (img){ img.onclick = imageOnClickHandler; }) function imageOnClickHandler(){ 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>
document.getElementById
can only select one element at a time, you should use unique id for element. document.getElementById
一次只能选择一个元素,您应该对元素使用唯一的ID。
For this one, one thing you wanna try out is add class="imgs"
for your img elements, and use selector functions like document.querySelectorAll
or document.getElementsByClassName
. 为此,您想尝试的一件事是为img元素添加
class="imgs"
,并使用选择器功能,例如document.querySelectorAll
或document.getElementsByClassName
。 Then you can apply styles for each image by a for loop. 然后,您可以通过for循环为每个图像应用样式。
两个图像都具有相同的id
,即myImg
,这是错误的id
应该是唯一的,将其更改为class并使用document.querySelectorAll
而不是
document.getElementById
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.