javascript - 无法在 javascript 上打开多个模态图像

Question

在这里创建了一个 FIDDLE: https://jsfiddle.net/jqqn2gg7/

我在上面发布了关于我的问题的 fiddle 。如果你转到“Bunny1”，你可以将鼠标悬停在兔子上，你会看到你可以打开第一个，但第二个甚至不会让步。我尝试了一切，甚至第一只兔子也停止了工作。你回去工作了。

这里缺少什么？

我还尝试使用“Escape”按钮关闭而不是仅使用“X”按钮。

我会在这里发布我的问题代码:

<div class="content-lg container">
  <div class="toolbar mb2 mt2">
    <button class="btn fil-cat" href="" data-rel="all"><i class="fa fa-star-o" aria-hidden="true"></i> All</button>
    <button class="btn fil-cat" data-rel="bunny1">bunny1</button>
    <button class="btn fil-cat" data-rel="bunny2">bunny2</button>
    <button class="btn fil-cat" data-rel="bunny3">bunny3</button>
    <button class="btn fil-cat" data-rel="bunny4">bunny4</button>
    <button class="btn fil-cat" data-rel="bunny5">bunny5</button>
  </div>

  <div id="portfolio">
    <div class="tile scale-anm bunny1 all">
      <img id="myImg" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg" alt="Toldos Algarve" width="300" height="200">
    </div>
    <div class="tile scale-anm bunny1 all">
      <img id="myImg" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny1 all">
      <img id="myImg" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny2 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny2 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny2 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny3 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny3 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny3 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny3 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny4 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny4 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny4 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <!-- 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>
    <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="img02">

      <!-- Modal Caption (Image Text) -->
      <div id="caption"></div>
    </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

和 javascript:

$(function() {
  var selectedClass = "";
  $(".fil-cat").click(function() {
    selectedClass = $(this).attr("data-rel");
    $("#portfolio").fadeTo(100, 0.1);
    $("#portfolio div").not("." + selectedClass).fadeOut().removeClass('scale-anm');
    setTimeout(function() {
      $("." + selectedClass).fadeIn().addClass('scale-anm');
      $("#portfolio").fadeTo(300, 1);
    }, 300);

  });
});

// DAT GALLERY

// 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 modalImg2 = document.getElementById("img02");
var captionText = document.getElementById("caption");
img.onclick = function() {
  modal.style.display = "block";
  modalImg.src = this.src;
  modalImg2.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";
}

// end of gallery

Answer 1

这是因为您使用 getElementByID 仅挑出其中一张图像，而 ID 仅适用于一张图像。您不能有多个具有相同 ID 的 ID。

另外...因为您在顶部部分使用了 jquery，所以不妨坚持使用它，而不要在其余部分使用 vanilla js。所以就这样做吧，它应该是好的。

// Apply click handler to all tile elements,
$('.tile').click(function(){
   // Get image inside tile element
  var img = $(this).find('img');
  // Update modal with image data
  $("#img01").attr('src', img.attr('src'));
  $("#img02").attr('src', img.attr('src'));
  $('#caption').html(img.attr('alt'));
  $('#myModal').css('display','block');
});

// Close modal
$('.close').click(function(){
  $('#myModal').css('display','none');
})

这样更加一致和简洁。

同时给 .tile 类，光标指针，这样看起来你可以点击它。

 .tile { cursor:pointer; }

SEE FIDDLE