javascript - 多个 Javascript 模态

Question

尝试创建一个包含多张图片的页面，当您单击每张图片时，它会使用模式放大。此代码适用于一张图片，但当我添加更多图片时，只有第一张有效。请指教。

// Zoom in Affect
// 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("img");			<!-- ? -->		
var captionText = document.getElementById("caption");		<!-- ? -->
img.onclick = function(){									<!-- when you click on var img (which equals id="myImg", which is the original img? -->
    modal.style.display = "block";							<!-- ? -->
    modalImg.src = this.src;								<!-- ? -->
    modalImg.alt = this.alt;								<!-- ? -->
    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";
}

#myImg {
	cursor: pointer;
	transition: 0.3s;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border: 3px solid #7DAFE7;
}

#myImg:hover {
	opacity: 0.7;				/* How much image changes when moving mouse over it */
	border: 3px solid #137709;
}

/* The Modal (background) */
.modal {
	display: none; 				/* ? */	/* Hidden by default */
	position: fixed; 			/* ? */	/* Stay in place */
	z-index: 1; 				/* ? */	/* Sit on top */
	padding-top: 100px; 		/* Pixels the zoomed image is from the top of the screen */ /* 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); /* ? not sure why there's 2 background-color */ /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;						/* Width of picture inside modal? */
    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;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
.picture {
	width: 100%;
	/*background-color: #0200FF;*/
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 5%;
	position: relative;
}
.imgPicture {
    width: 90%;
 }

<div class="picture">     
        <img class="imgPicture" id="myImg" src="photo-1.jpg">    
        <div id="myModal" class="modal">
        <span class="close">X</span>			<img id="img" class="modal-content">
        <div id="caption"></div>
      </div>            
</div>

<div class="picture">     
      <img class="imgPicture" id="myImg" src="photo-2.jpg">    
      <div id="myModal" class="modal">
          <span class="close">X</span>				      <img id="img" class="modal-content">
          <div id="caption"></div>
      </div>            
</div>

Answer 1

您需要为每个元素附加一个事件监听器，因为有多个实例。此外，在创建一个元素的多个实例时，最好使用类而不是 ID(除非像@mmm 所建议的那样，它们是唯一的)。

// Zoom in Affect
// 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.getElementsByClassName('imgPicture');					<!-- ? -->
var modalImg = document.getElementById("img");			<!-- ? -->		
var captionText = document.getElementById("caption");		<!-- ? -->
for (var i=0; i<img.length; i++) {
    img[i].addEventListener('click', function(){									  <!-- when you click on var img (which equals id="myImg", which is the original img? -->
        modal.style.display = "block";							<!-- ? -->
        modalImg.src = this.src;								<!-- ? -->
        modalImg.alt = this.alt;								<!-- ? -->
        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";
}

#myImg {
	cursor: pointer;
	transition: 0.3s;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border: 3px solid #7DAFE7;
}

#myImg:hover {
	opacity: 0.7;				/* How much image changes when moving mouse over it */
	border: 3px solid #137709;
}

/* The Modal (background) */
.modal {
	display: none; 				/* ? */	/* Hidden by default */
	position: fixed; 			/* ? */	/* Stay in place */
	z-index: 1; 				/* ? */	/* Sit on top */
	padding-top: 100px; 		/* Pixels the zoomed image is from the top of the screen */ /* 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); /* ? not sure why there's 2 background-color */ /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;						/* Width of picture inside modal? */
    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;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
.picture {
	width: 100%;
	/*background-color: #0200FF;*/
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 5%;
	position: relative;
}
.imgPicture {
    width: 90%;
 }

<div class="picture">     
        <img class="imgPicture" id="myImg" src="photo-1.jpg">    
        <div id="myModal" class="modal">
        <span class="close">X</span>			<img id="img" class="modal-content">
        <div id="caption"></div>
      </div>            
</div>

<div class="picture">     
      <img class="imgPicture" id="myImg" src="photo-2.jpg">    
      <div id="myModal" class="modal">
          <span class="close">X</span>				      <img id="img" class="modal-content">
          <div id="caption"></div>
      </div>            
</div>