如何添加具有不同图像的弹出窗口来显示？

Question

我找到了这个 link 但是当我添加更多图片时弹出窗口不起作用。我想要多个具有不同弹出图像的图像。我怎样才能添加更多图像并有不同的弹出窗口图像？

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>

如何添加具有不同图像的弹出窗口来显示？

How to add popup with different image to show?

html

javascript

css

jquery

popup