HTML + Javascript模态多图像

Question

我正在一个我有一个图片库的页面上工作。每次我按下图像时，我将运行模态效果，并使图像全屏，右上方有一个接近的底部。我遵循这个教程https://www.w3schools.com/howto/howto_css_modal_images.asp

现在，我卡住了，因为模态效果不运行。我在控制台上没有得到任何错误信息。所以我有点盲目了。我一直在做的是检查我的类/id，但它们看起来很好。有谁能告诉我我遗漏了什么吗?

<div id="imagesMain">
<div class="row">
<div class="column">
<img src="/images/placeholder.png" class="galleryimage">
<img src="/images/placeholder.png" class="galleryimage">
<img src="/images/placeholder.png" class="galleryimage">
</div>
<div class="column">
<img src="/images/placeholder2.jpg" class="galleryimage">
<img src="/images/placeholder.png" class="galleryimage">  
</div>
<div class="column">
<img src="/images/placeholder.png" class="galleryimage">
<img src="/images/placeholder.png" class="galleryimage">
<img src="/images/placeholder.png" class="galleryimage">
</div>
<div class="column">
<img src="/images/placeholder.png" class="galleryimage">
<img src="/images/placeholder2.jpg" class="galleryimage">
<img src="/images/placeholder.png" class="galleryimage">
</div>
<div class="column">
<img src="/images/placeholder.png" class="galleryimage">
<img src="/images/placeholder2.jpg" class="galleryimage">
<img src="/images/placeholder.png" class="galleryimage">
</div>
<div class="column">
<img src="/images/placeholder2.jpg" class="galleryimage">
<img src="/images/placeholder.png" class="galleryimage">
<img src="/images/placeholder.png" class="galleryimage">
</div>
</div>
</div>
<!-- DIV placeholder for the Modal-->
<div id="myModal" class="modal">
<!-- CLose Button span-->
<span class="close">&times;</span>
<!-- Modal content "the image"-->
<img class="modal-content" id="img01">
<!-- Modal caption for text image-->
<div id="caption">TestingModal</div>
</div>

CSS:

body {
font-family: Helvetica;
min-height: 100vh;
background-color: #fafafa; 
color: black;
padding-bottom: 10px;
}
#container {
max-width: 850px;
margin: 0 auto;
padding: 0 2rem;
width: 100%;
}
#headContainer {
text-align: center;
display: inline-block; 
width: 100%;
}
#headContainer img{
margin: 15px;
padding: 10px;
width: 170px;
border-radius: 50%;
}
#profileImage{
float: left;
width: 48%
} 
#menu {
text-align: center;
padding: 1px;
margin: 1px;
}
#btn-menu {
/* text-decoration: none; */
border: none;
background-color: transparent;
font-display: inherit;
padding: 10px;
margin: 10px;
cursor: pointer;
/* display: inline-flex; */
justify-content: center;
background-color:#3e68ff;
color: #fff;
border-radius: 8px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
min-width: 15ch;
min-height: 15px;
} 

/* control image sizes as i cant figure out way to dynamically adjust size  */
img {
width: 105%;
border-radius: 5px;
cursor: pointer; 
}
.galleryimage hover{
opacity: 0.7;
}
#imagesMain {
display: flex;
flex-wrap: wrap;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 10px;
margin: 10px;
}
.column {
float: left;
flex: 25%;
padding: 10px;
}
/* .column img {
margin-top: 10px;
vertical-align: middle;
} */
/* MODAL EFFECT */
.galleryimage {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.galleryimage:hover {opacity: 0.7;};
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}

.modal-content{
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.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)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: grey;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
} 

js:

let modal = document.getElementById('myModal');
let img = document.getElementsByClassName('galleryimage');
let modalImg = document.getElementById('img01');
let captionText = document.getElementById('caption');
let span = document.getElementsByClassName('close')[0];

img.onClick = function () {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
span.onClick = function () {
modal.style.display = "none";
}

Answer 1

首先，您不能将事件侦听器设置为元素集合(在本例中为document.getElementsByClass)。为此，您可以按照以下方式循环遍历它们。其次，您在onClick方法上有一个类型错误。应该是onclick

let modal = document.getElementById('myModal');
let images = document.getElementsByClassName('galleryimage');
let modalImg = document.getElementById('img01');
let captionText = document.getElementById('caption');
let span = document.getElementsByClassName('close')[0];
Array.from(images).forEach(function (img) {
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
})
span.onclick = function () {
modal.style.display = "none";
}

body {
font-family: Helvetica;
min-height: 100vh;
background-color: #fafafa; 
color: black;
padding-bottom: 10px;
}
#container {
max-width: 850px;
margin: 0 auto;
padding: 0 2rem;
width: 100%;
}
#headContainer {
text-align: center;
display: inline-block; 
width: 100%;
}
#headContainer img{
margin: 15px;
padding: 10px;
width: 170px;
border-radius: 50%;
}
#profileImage{
float: left;
width: 48%
} 
#menu {
text-align: center;
padding: 1px;
margin: 1px;
}
#btn-menu {
/* text-decoration: none; */
border: none;
background-color: transparent;
font-display: inherit;
padding: 10px;
margin: 10px;
cursor: pointer;
/* display: inline-flex; */
justify-content: center;
background-color:#3e68ff;
color: #fff;
border-radius: 8px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
min-width: 15ch;
min-height: 15px;
} 

/* control image sizes as i cant figure out way to dynamically adjust size  */
img {
width: 105%;
border-radius: 5px;
cursor: pointer; 
}
.galleryimage hover{
opacity: 0.7;
}
#imagesMain {
display: flex;
flex-wrap: wrap;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 10px;
margin: 10px;
}
.column {
float: left;
flex: 25%;
padding: 10px;
}
/* .column img {
margin-top: 10px;
vertical-align: middle;
} */
/* MODAL EFFECT */
.galleryimage {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.galleryimage:hover {opacity: 0.7;};
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}

.modal-content{
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.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)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: grey;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}

<div id="imagesMain">
<div class="row">
<div class="column">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
</div>
<div class="column">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
<img src="https://via.placeholder.com/140x100" class="galleryimage">  
</div>
<div class="column">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
</div>
<div class="column">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
</div>
<div class="column">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
</div>
<div class="column">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
<img src="https://via.placeholder.com/140x100" class="galleryimage">
</div>
</div>
</div>
<!-- DIV placeholder for the Modal-->
<div id="myModal" class="modal">
<!-- CLose Button span-->
<span class="close">&times;</span>
<!-- Modal content "the image"-->
<img class="modal-content" id="img01">
<!-- Modal caption for text image-->
<div id="caption">TestingModal</div>
</div>

Answer 2

document.getElementByClassName返回包含给定类的所有元素的Html集合。即使Dom中只有一个元素，您也需要像处理数组一样处理它。E. img[0])，您将发现您的脚本在包含给定类的第一个元素上工作:)

试题:

img.forEach( e => e.onClick = function () {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}) 

我敢肯定你会得到一个不同的结果。

Answer 3

getElementsByClassName()返回一个类似数组的元素对象。您需要遍历这些元素来添加事件处理程序。

还有，你可能指的是onclick，而不是onClick。

下面是一个例子:

let modal = document.getElementById('myModal');
let img = document.getElementsByClassName('galleryimage');
let modalImg = document.getElementById('img01');
let captionText = document.getElementById('caption');
let span = document.getElementsByClassName('close')[0];
let clickHandler = function(e) {
modal.style.display = "block";
modalImg.src = e.srcElement.src;
captionText.innerHTML = e.srcElement.alt;
}
for (var i = 0; i < img.length; i++) {
img[i].addEventListener("click", clickHandler, false);
}
span.addEventListener("click", function() {
modal.style.display = "none";
});

body {
font-family: Helvetica;
min-height: 100vh;
background-color: #fafafa;
color: black;
padding-bottom: 10px;
}
#container {
max-width: 850px;
margin: 0 auto;
padding: 0 2rem;
width: 100%;
}
#headContainer {
text-align: center;
display: inline-block;
width: 100%;
}
#headContainer img {
margin: 15px;
padding: 10px;
width: 170px;
border-radius: 50%;
}
#profileImage {
float: left;
width: 48%
}
#menu {
text-align: center;
padding: 1px;
margin: 1px;
}
#btn-menu {
/* text-decoration: none; */
border: none;
background-color: transparent;
font-display: inherit;
padding: 10px;
margin: 10px;
cursor: pointer;
/* display: inline-flex; */
justify-content: center;
background-color: #3e68ff;
color: #fff;
border-radius: 8px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
min-width: 15ch;
min-height: 15px;
}

/* control image sizes as i cant figure out way to dynamically adjust size  */
img {
width: 105%;
border-radius: 5px;
cursor: pointer;
}
.galleryimage hover {
opacity: 0.7;
}
#imagesMain {
display: flex;
flex-wrap: wrap;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 10px;
margin: 10px;
}
.column {
float: left;
flex: 25%;
padding: 10px;
}

/* .column img {
margin-top: 10px;
vertical-align: middle;
} */

/* MODAL EFFECT */
.galleryimage {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.galleryimage:hover {
opacity: 0.7;
}
;
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.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)
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: grey;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}

<div id="imagesMain">
<div class="row">
<div class="column">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
</div>
<div class="column">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
</div>
<div class="column">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
</div>
<div class="column">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
</div>
<div class="column">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
</div>
<div class="column">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="galleryimage">
</div>
</div>
</div>
<!-- DIV placeholder for the Modal-->
<div id="myModal" class="modal">
<!-- CLose Button span-->
<span class="close">&times;</span>
<!-- Modal content "the image"-->
<img class="modal-content" id="img01">
<!-- Modal caption for text image-->
<div id="caption">TestingModal</div>
</div>