如何設置模式彈出多個圖像

Question

我嘗試使用這個從w3s以顯示模式彈出多圖片：

// 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"; 
 
}

/* Style the Image Used to Trigger the Modal */ 
 
#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 (Image Text) - Same Width as the Image */ 
 
#caption { 
 
    margin: auto; 
 
    display: block; 
 
    width: 80%; 
 
    max-width: 700px; 
 
    text-align: center; 
 
    color: #ccc; 
 
    padding: 10px 0; 
 
    height: 150px; 
 
} 
 

 
/* Add 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 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%; 
 
    } 
 
}

<!-- Trigger the Modal --> 
 
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200"> 
 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 

 
    <!-- The Close Button --> 
 
    <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span> 
 

 
    <!-- Modal Content (The Image) --> 
 
    <img class="modal-content" id="img01"> 
 

 
    <!-- Modal Caption (Image Text) --> 
 
    <div id="caption"></div> 
 
</div>

它做工精細的一個圖像。

在我的網站上，我有一些我需要顯示更多圖像的頁面，如果我將此代碼設置爲其他圖像，則彈出窗口僅適用於第一個圖像，而不適用於其他圖像。

如何正確設置html和javascript？

Answer 1

此實現不起作用，因爲您是通過ID引用相同的DOM元素。你可以試試這個JSFiddle，它使用magnific popup plugin來製作一個多重圖像模式。這對你來說也更容易實現。

這裏是莊重的彈出的例子：我發現https://jsfiddle.net/8f60f93t/2/

Answer 2

最好的解決辦法：

最前一頁的HTML變化：

例： 每個圖像需要自己的ID ...非常小的改變你的html ...（從w3school.com從原始文件更改）

<div class="image"><img **id="myImg2"** src="images/pic02.jpg" alt="" /></div> 
<div class="image"><img **id="myImg3"** src="images/pic03.jpg" alt="" /></div> 

原始

<div class="image"><img **id="myImg" src="images/pic01.jpg" alt="" /></div> 

二，CSS變化：

複製原來的 「#myImg」 和 「#myImg：懸停」 屬性和粘貼右後下....添加orinal新（數字）。每個圖像需要自己獨特的 「myImg」 和其獨特的 「#myImg：懸停」

例：

#myImg2 { 
    border-radius: 5px; 
    cursor: pointer; 
    transition: 0.3s; 
} 

#myImg3 { 
    border-radius: 5px; 
    cursor: pointer; 
    transition: 0.3s; 
} 

#myImg2:hover {opacity: 0.7;} 

#myImg3:hover {opacity: 0.7;} 

原始

#myImg { 
     border-radius: 5px; 
     cursor: pointer; 
     transition: 0.3s; 
    } 

    #myImg:hover {opacity: 0.7;} 

---- 

的Javascript改變： 添加以下內容： 添加對於每個圖像，變量「變量」和每個圖像的「點擊」函數： --- 例：

var img2 = document.getElementById('myImg2'); 
    var img3 = document.getElementById('myImg3'); 

    //handle click for myImg2 
    img2.onclick = function(){ 
     modal.style.display = "block"; 
     modalImg.src = this.src; 
     captionText.innerHTML = this.alt; 
    } 

    //handle click for myImg3 
    img3.onclick = function(){ 
     modal.style.display = "block"; 
     modalImg.src = this.src; 
     captionText.innerHTML = this.alt; 
    } 

原單

<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.getElementById('myImg'); 
var modalImg = document.getElementById("img01"); 
var img2 = document.getElementById('myImg2'); 
var img3 = document.getElementById('myImg3'); 
var captionText = document.getElementById("caption"); 
img.onclick = function(){ 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
    captionText.innerHTML = this.alt; 
} 

//handle click for myImg2 
img2.onclick = function(){ 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
    captionText.innerHTML = this.alt; 
} 

//handle click for myImg3 
img3.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> 

這裏是瞭解的東西很容易的例子：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#myImg { 
    border-radius: 5px; 
    cursor: pointer; 
    transition: 0.3s; 
} 

#myImg2 { 
    border-radius: 5px; 
    cursor: pointer; 
    transition: 0.3s; 
} 

#myImg3 { 
    border-radius: 5px; 
    cursor: pointer; 
    transition: 0.3s; 
} 

#myImg:hover {opacity: 0.7;} 

#myImg2:hover {opacity: 0.7;} 

#myImg3: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%; 
    } 
} 
</style> 
</head> 
<body> 

<h2>Image Modal</h2> 
<p>Guitarfetish.com </p> 
<p>Gallery ideas</p> 

<img id="myImg" src="img01.jpg" alt="XGP Tele Bodies" width="600" height="200"> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 
    <span class="close">&times;</span> 
    <img class="modal-content" id="img01"> 
    <div id="caption"></div> 
</div> 

<img id="myImg2" src="img02.jpg" alt="Xaviere Guitars" width="600" height="200"> 

<img id="myImg3" src="img03.jpg" alt="Premium Guitar Cases" width="600" height="200"> 
<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.getElementById('myImg'); 
var img2 = document.getElementById('myImg2'); 
var img3 = document.getElementById('myImg3'); 
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; 
} 

//handle click for myImg2 
img2.onclick = function(){ 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
    captionText.innerHTML = this.alt; 
} 

//handle click for myImg3 
img3.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> 

</body> 
</html>