Bill Demaria Bill Demaria - 3 months ago 9
CSS Question

Multiple Javascript Modals

Trying to create a page with multiple pictures, as you click on each it zooms in using a modal. This code worked great for 1 picture, but as I added several more, only the first works. Please advise.



// 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

You need to attach an event listener to each of the elements, since there are multiple instances. Also, it's good practice to use classes instead of IDs when creating multiple instances of an element (unless, as @mmm suggests, they are unique).

// 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>

Comments