I am in need of some assistance. I am trying to get a modal image to work on a website I am designing, but nothing happens when I try it. The desired behavior is that I want the image to be clicked and then the modal will appear. Below, I have posted the code. I have included the code for the HTML, CSS, and JavaScript sections relating to this functionality. Any help will be greatly appreciated, cheers!
// Get the modal
var modal = document.getElementById("picModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("proImg");
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";
}
#proImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#proImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/*Hides by default*/
position: fixed;
/*Keeps in place*/
z-index: 1;
/*Displays over everything*/
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
/*Enable scroll if needed*/
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
/*Black w.opacity*/
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 600px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 600px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/*Animation - Zoom in the Modal*/
.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 Modal 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: 600px) {
.modal-content {
width: 100%;
}
}
<img src="https://placeimg.com/100/100/any" id="proImg" class="product-image" alt="This is an image">
<!-- Modal Div -->
<div id="picModal" class="modal">
<!-- Close Button -->
<span class="close">X</span>
<!-- Modal Image -->
<img class="modal-content" id="img01">
<!-- Modal Caption -->
<div id="caption"></div>
</div>
Related
So, I use Angularjs, i;m trying to make a modal photo. but it does not work, the photo does not pop up if clicked.
Here is my html code:
\<body\>
\<div class="center-content0"\>
<div class="box-contentr">
<img id="myImg" src="https://res.cloudinary.com/upmsi/image/upload/v1646621984/News/Features/eddy/P7040240_uzxrco.jpg" alt="Snow" style="width:100%;max-width:700px; max-height: 500px">
\<!-- The Modal --\>
\<div id="myModal" class="modal"\>
\<span class="close" onclick="document.getElementById('myModal').style.display='none'"\>×\</span\>
\<img class="modal-content" id="img01"\>
\<div id="caption"\>\</div\>
\</div\>
</div>
</div>
</body>
js:
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;
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";
console.log(Chart)
}
css:
#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;
}
So I used some code from this thread to make the images of my slideshow expandable. The image on the first slide works perfectly, but when I click on the image on the second slide, the whole modal image opens up in the first slide.
I want each image of my slideshow to open up in the slide they are in. How can I change my code to do this?
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal
var img = document.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var showModal = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
for (var i = 0; i < img.length; i++) {
img[i].addEventListener('click', showModal);
}
// 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 {
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%;
}
}
<div><img src="whatever.jpg" style="max-width: 100%;" class="myImg" alt="whatever"></div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
You can use http://fancybox.net/ for this, where you'll find multiple options for modal images. You can make gallery over there or also you can use a single image as the modal image.
First off, I am new to coding. I am trying to put two gifs side by side that when clicked on expand into a pop up window and the videos are enlarged. I have succeeded in getting the images side by side. The first gif expands when clicked on and acts how I want it to. But the second gif does not. I believe it has to do with the 's both being the same, but I am not sure how to go about using a class or multiple ids to make the modal work correctly. Some help would be much appreciated! Attached is my code.
// 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";
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
/*Image Loops*/
#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: 1600px;
height: 800px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-size: 20px;
}
/* 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: white;
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%;
}
}
<div class="row">
<div class="column">
<img id="myImg" src="image.gif" alt="img" text-align="center" style="width:100%"><br>
</div>
<div class="column">
<img id="myImg" src="image2.gif" alt="image2" text-align="center" style="width:100%"><br>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
First of all this part here :
var img = document.getElementById("myImg");
is getting only first element with this ID. ID should be unique.
The solution to this would be using a class instead but there's a problem with that approach. The problem is when you get elements by Classname it returns HTML collection to which you can't bind an event without looping it which would make things complicated.
So the best solution to this instead of binding an event use onClick as an attribute and call a function.
Solution
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
function modalOpen(src,alt){
modal.style.display = "block";
modalImg.src = src;
captionText.innerHTML = 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";
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
.caption{
text-align:center
}
/*Image Loops*/
#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: 1600px;
height: 800px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-size: 20px;
}
/* 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: white;
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%;
}
}
<div class="row">
<div class="column">
<img id="myImg" onclick="modalOpen(this.src,this.alt)" src="http://via.placeholder.com/128x128" alt="img" text-align="center" style="width:100%"><p class="caption">img</p><br>
</div>
<div class="column">
<img id="myImg" onclick="modalOpen(this.src,this.alt)" src="http://via.placeholder.com/129x129" alt="image2" text-align="center" style="width:100%"><p class="caption">image2</p><br>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
I do not have the actual images, but I believe this should work.
// Get the modal
const modal = document.getElementById('myModal');
const modalImg = document.getElementById("img01");
const captionText = document.getElementById("caption");
document.addEventListener('click', (event) => {
if (event.target.matches('img')) {
loadModalImage(event.target);
}
}, false);
const loadModalImage = (target) => {
modal.style.display = "block";
modalImg.src = target.src;
captionText.innerHTML = target.alt;
}
// Get the <span> element that closes the modal
const span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = () => {
modal.style.display = "none";
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
/*Image Loops*/
.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: 1600px;
height: 800px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-size: 20px;
}
/* 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: white;
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%;
}
}
<div class="row">
<div class="column">
<img class="myImg" src="https://picsum.photos/100/100" alt="img" text-align="center" style="width:100%"><br>
</div>
<div class="column">
<img class="myImg" src="https://picsum.photos/100/100" alt="image2" text-align="center" style="width:100%"><br>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
I'm trying to make different links in the same paragraph launch different images in the modal window, but when you click the second, it only shows the first image again. Any advice on how to correct it? I was trying to find a solution that didn't involve separating each modal into its own div (I would need to force each div to not break to a new line). I was wondering if there was a more elegant solution out there... Thanks! Here are my javascript, css, and html.
var modal = document.getElementById('myModal');
modal.addEventListener('click',function(){
this.style.display="none";
})
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
function launchModal(element) {;
var modalImg = document.getElementById("img01");
modalImg.src = element.parentElement.children[1].src;
modalImg.alt = this.alt;
modal.style.display = "block";
}
img.responsive {
display:none;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 2000;
/* 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: rgba(0, 0, 0, 0.75);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
max-width: 70%;
max-height: 70%;
}
/* 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 {
transform: scale(0)
}
to {
transform: scale(1)
}
}
#keyframes zoom {
from {
transform: scale(0.1)
}
to {
transform: scale(1)
}
}
/* The Close Button */
.close {
font-family: Arial;
position: absolute;
top: 75px;
right: 35px;
color: white;
font-size: 60px;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: white;
text-decoration: none;
cursor: pointer;
}
<p>
Archie is a dog that likes to steal things. If you are interested in seeing Archie, click on <a onclick="launchModal(this)" href="#">this link</a>
<img class="responsive" src="https://i.imgur.com/cQy7Yg.jpg">and a picture of him will pop up.
Now we have a new sentence with a different modal in the same paragraph. Wellington is a dog that likes to smile and eat cupcakes. If you are interested in seeing Wellington, click on <a onclick="launchModal(this)" href="#">this link</a>
<img class="responsive" src="https://i.imgur.com/sPhLIKY.jpg">and a picture of him will pop up.</p>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">x</span>
<img class="modal-content" id="img01">
</div>
The issue is that both elements have the same parent so you will always select the same image using parentElement.children[1].An idea is to include the image link as a data attribute inside the link itself and avoid extra elements.
var modal = document.getElementById('myModal');
modal.addEventListener('click',function(){
this.style.display="none";
})
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
function launchModal(element) {
var modalImg = document.getElementById("img01");
modalImg.src = element.getAttribute('data-src');
modalImg.alt = element.getAttribute('data-alt');
modal.style.display = "block";
}
div.lisa{
display:inline;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 2000;
/* 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: rgba(0, 0, 0, 0.75);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
max-width: 70%;
max-height: 70%;
}
/* 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 {
transform: scale(0)
}
to {
transform: scale(1)
}
}
#keyframes zoom {
from {
transform: scale(0.1)
}
to {
transform: scale(1)
}
}
/* The Close Button */
.close {
font-family: Arial;
position: absolute;
top: 75px;
right: 35px;
color: white;
font-size: 60px;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: white;
text-decoration: none;
cursor: pointer;
}
<p>
Archie is a dog that likes to steal things. If you are interested in seeing Archie, click on <a onclick="launchModal(this);return false;" data-alt="img1" data-src="https://i.imgur.com/cQy7Yg.jpg" href="#">this link</a> and a picture of him will pop up.
Wellington is a dog that likes to smile and eat cupcakes. If you are interested in seeing Wellington, click on <a onclick="launchModal(this);return false;" data-alt="img2" data-src="https://i.imgur.com/sPhLIKY.jpg" href="#">this link</a>
and a picture of him will pop up.</p>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">x</span>
<img class="modal-content" id="img01">
</div>
In case you want to keep the img element you need to create a kind of relation between them and their respective a tag. Here is an example where I use ID:
var modal = document.getElementById('myModal');
modal.addEventListener('click',function(){
this.style.display="none";
})
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
function launchModal(element) {;
var modalImg = document.getElementById("img01");
modalImg.src = document.getElementById(element).src;
modalImg.alt = document.getElementById(element).alt;
modal.style.display = "block";
}
div.lisa{
display:inline;
}
/* The Modal (background) */
img.responsive {
display:none;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 2000;
/* 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: rgba(0, 0, 0, 0.75);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
max-width: 70%;
max-height: 70%;
}
/* 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 {
transform: scale(0)
}
to {
transform: scale(1)
}
}
#keyframes zoom {
from {
transform: scale(0.1)
}
to {
transform: scale(1)
}
}
/* The Close Button */
.close {
font-family: Arial;
position: absolute;
top: 75px;
right: 35px;
color: white;
font-size: 60px;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: white;
text-decoration: none;
cursor: pointer;
}
<p>
Archie is a dog that likes to steal things. If you are interested in seeing Archie, click on <a onclick="launchModal('img1');return false;" href="#">this link</a><img class="responsive" src="https://i.imgur.com/cQy7Yg.jpg" alt="img1" id="img1"> and a picture of him will pop up.
Wellington is a dog that likes to smile and eat cupcakes. If you are interested in seeing Wellington, click on <a onclick="launchModal('img2');return false;" href="#">this link</a><img class="responsive" src="https://i.imgur.com/sPhLIKY.jpg" alt="img2" id="img2">
and a picture of him will pop up.</p>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">x</span>
<img class="modal-content" id="img01">
</div>
Hello I'm trying to figure out why when I changed the increment operator to decrement operator in my javascript **for(var i = 0; i < img.length;i--)** file the window that pop up doesn't close anymore when I click on the close icon and also I got a error message, and this is only occurring with decrement operator-- with increment operator ++ works alright.
.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%;
}
}
<img class="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="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.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for(var i = 0; i < img.length;i--){
img[i].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>
Like #user184994 said, your loop will run forever in this form. i will never get bigger than the array length. If you change your for loop to:
for(var i = img.length - 1; i >= 0; i--){
//etc
}
It should run over each item like before, except now in reverse.