Question

我正在尝试使用此示例为图像创建模式弹出窗口： https://www.w3schools.com/howto/howto_css_modal_images.asp

我大部分工作都根据需要进行，但是我似乎无法使它在同一页面上多次工作。

我正在用php生成文件列表，这肯定会使它复杂化。

此代码有一个try it编辑器 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img

最终，我需要用它来包装我在PHP中生成的链接。

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

    body {font-family: Arial, Helvetica, sans-serif;}

    #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 id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%; max-width:300px">

    <!-- The Modal -->
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>

Answer 1

如果我们希望能够单击多张图像，则可以为您的所有图像添加一个类（在下面的示例中：js-img）。由于有了该类，您可以查询这些元素并循环遍历每个元素以添加一个onclick侦听器。

我们可以在这里看到一个有效的示例：https://jsfiddle.net/k8woxf0s/3/

主要代码是（循环）：

Array.from(imgs).forEach(function(img) {
  img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
  };
})

Array.from是必需的，因为getElementsByClassName不会返回数组，而是返回HTMLCollection：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName。

您可以使用querySelectorAll（这是更新的功能），请参见此处：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

现在，您必须编写代码以生成图像的DOM（PHP代码）。

希望对您有所帮助：）。

一个javascript函数仅在页面上起作用一次

1 个答案: