如何添加具有不同圖像的彈出窗口來顯示？

Question

我找到了這個鏈接，但是當我添加更多圖像時，彈出窗口不起作用。 我想要多個具有不同彈出圖像的圖像。 如何添加更多圖像並具有不同的彈出圖像？

https://www.w3schools.com/howto/howto_css_modal_images.asp

<div class="container" id="gallery">

    `<h1>Gallery</h1>`

    `<!-- Trigger the Modal -->
    <img id="thumbnail-01" class="myImg" src="images/thumbnail.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="modal-image">

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

    <!-- Trigger the Modal -->
    <img id="thumbnail-02" class="myImg" src="images/thumbnail.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="modal-image">`

      `<!-- Modal Caption (Image Text) -->`
      `<div id="caption"></div>`
    `</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("modal-image");`
`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";
}

Answer 1

javascript 代碼與圖像的 ID 相關聯。 var modal = document.getElementById("myModal"); 您可以做的是對於每個<img>標簽，您可以包含您需要的額外數據（例如標題）作為標簽的數據字段，例如： <img data-caption="somevalue">然后您可以使用該函數來通過為單擊的圖像填充正確的信息來編輯模態（最大化面板）。 所以你可以重復使用相同的模態。

Answer 2

你可以試試這樣的

   <!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>


<div class="w3-row-padding">
  <div class="w3-container w3-third">
    <img src="img_snowtops.jpg" style="width:100%;cursor:pointer" 
    onclick="onClick(this)" class="w3-hover-opacity">
  </div>
  <div class="w3-container w3-third">
    <img src="img_lights.jpg" style="width:100%;cursor:pointer" 
    onclick="onClick(this)" class="w3-hover-opacity">
  </div>
  <div class="w3-container w3-third">
    <img src="img_mountains.jpg" style="width:100%;cursor:pointer" 
    onclick="onClick(this)" class="w3-hover-opacity">
  </div>
</div>

<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
  <span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span>
  <div class="w3-modal-content w3-animate-zoom">
    <img id="img01" style="width:100%">
  </div>
</div>

<script>
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
}
</script>

</body>
</html>

如何添加具有不同圖像的彈出窗口來顯示？

問題描述

2 個解決方案

解決方案1
0 2020-03-30 20:05:53

解決方案2
0 已采納 2020-03-30 20:23:58

如何添加具有不同圖像的彈出窗口來顯示？

問題描述

2 個解決方案

解決方案1 0 2020-03-30 20:05:53

解決方案2 0 已采納 2020-03-30 20:23:58

解決方案1
0 2020-03-30 20:05:53

解決方案2
0 已采納 2020-03-30 20:23:58