我的模態只適用於第一張圖片，但不適用於其他圖片？

該模式僅適用於第一張圖片，但不適用於其他圖片。我試圖將img var更改爲getElementsByClassName，但它不起作用。我需要找出爲什麼它只能在一個ID上工作，而不是在ID的其餘部分。是否有任何我缺少的js代碼？我的模態只適用於第一張圖片，但不適用於其他圖片？

// 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('img_1'); 
 
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"; 
 
}

.modal_image { 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
 
} 
 

 
.modal_image: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.1)} 
 
    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%; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 

 
<img class="modal_image" id="img_1" src="https://www.nordicvisitor.com/images/iceland/winter/northern-lights-lake-thingvellir-national-park-iceland.jpg" alt="Northern Lights, Norway" width="300" height="200"> 
 
<img class="modal_image" id="img_2" src="https://www.nordicvisitor.com/images/iceland/winter/northern-lights-lake-thingvellir-national-park-iceland.jpg" alt="Northern Lights, Norway" width="300" height="200"> 
 
<img class="modal_image" id="img_3" src="https://www.nordicvisitor.com/images/iceland/winter/northern-lights-lake-thingvellir-national-park-iceland.jpg" alt="Northern Lights, Norway" width="300" height="200"> 
 
<img class="modal_image" id="img_4" src="https://www.nordicvisitor.com/images/iceland/winter/northern-lights-lake-thingvellir-national-park-iceland.jpg" alt="Northern Lights, Norway" width="300" height="200"> 
 
<img class="modal_image" id="img_5" src="https://www.nordicvisitor.com/images/iceland/winter/northern-lights-lake-thingvellir-national-park-iceland.jpg" alt="Northern Lights, 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 type="text/javascript" src="script.js"></script> 
 
</body> 
 
</html>

來源

2016-11-20 Nigel

嘗試這樣的。 Id不能與多選擇器一起使用。類可以使用多選擇器。因此，與for loop一起使用時，它將應用img的類元素的每個onclick。

與addEventListener('click',function() {})，而不是element.onclick

// Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
// Get the image and insert it inside the modal - use its "alt" text as a cap 
 
var img = document.getElementsByClassName('modal_image'); 
 
for(var i=0; i<img.length; i++){ 
 
var modalImg = document.getElementById("img01"); 
 
var captionText = document.getElementById("caption"); 
 
img[i].addEventListener('click',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"; 
 
}

.modal_image { 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
 
} 
 

 
.modal_image: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.1)} 
 
    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%; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 

 
<img class="modal_image" id="img_1" src="https://www.nordicvisitor.com/images/iceland/winter/northern-lights-lake-thingvellir-national-park-iceland.jpg" alt="Northern Lights, Norway" width="300" height="200"> 
 
<img class="modal_image" id="img_2" src="https://www.nordicvisitor.com/images/iceland/winter/northern-lights-lake-thingvellir-national-park-iceland.jpg" alt="Northern Lights, Norway" width="300" height="200"> 
 
<img class="modal_image" id="img_3" src="https://www.nordicvisitor.com/images/iceland/winter/northern-lights-lake-thingvellir-national-park-iceland.jpg" alt="Northern Lights, Norway" width="300" height="200"> 
 
<img class="modal_image" id="img_4" src="https://www.nordicvisitor.com/images/iceland/winter/northern-lights-lake-thingvellir-national-park-iceland.jpg" alt="Northern Lights, Norway" width="300" height="200"> 
 
<img class="modal_image" id="img_5" src="https://www.nordicvisitor.com/images/iceland/winter/northern-lights-lake-thingvellir-national-park-iceland.jpg" alt="Northern Lights, 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 type="text/javascript" src="script.js"></script> 
 
</body> 
 
</html>

來源

2016-11-20 06:45:19 prasanth

最好用我這樣做，它的工作原理所有的圖像上，但關閉按鈕不起作用了的addEventListener（ '點擊' ，函數（）{ \t modal.style.display = 「塊」; modalImg.src = this.src; captionText.innerHTML = this.alt; }）; – Nigel

是...我answer.see答案http://www.w3schools.com/js/js_htmldom_eventlistener.asp添加同樣的事情answer.where – prasanth

關閉按鈕的工作看不工作 – prasanth

我的模態只適用於第一張圖片，但不適用於其他圖片？

回答

相關問題