javascript - 多个 JavaScript 模式并关闭它们

Question

我正在尝试为 Web 类(class)的高级图形设计整理我的网站组合，但我遇到了 JavaScript 和模态问题。

本质上，我有一个包含六张照片的图库，我希望能够单击一张照片并弹出一个模式弹出窗口，该窗口是图像幻灯片(但不是页面上的其他五张图像)。但目前，一旦我将模态添加到第二个图像，我就无法关闭模态。它会显示每个，但不会关闭。我做错了什么？

这是 HTML:

<div class="container-fluid">
<div class="row">
    <div class="col-xs-6 col-md-4"><img src="images/IMG_0722.jpg" id="Brown" class="img-responsive" alt="Van Wickle Gates">
        <div class="middle">
            <div class="text">Brown University</div>
        </div>
        <!-- The Modal -->
        <div id="Modal1" class="modal">
            <span class="close">×</span>
            <img class="modal-content" id="img01">
            <div id="caption1"></div>
        </div>
    </div>
    <div class="col-xs-6 col-md-4"><img src="images/IMG_0683.jpg" id="Newport" class="img-responsive" alt="Goat Island Sunset">
        <div class="middle">
            <div class="text">Newport</div>
        </div>
        <!-- The Modal -->
        <div id="Modal2" class="modal">
            <span class="close">×</span>
            <img class="modal-content" id="img02">
            <div id="caption2"></div>
        </div>
    </div>

和 JavaScript:

// Get the modal
var modal = document.getElementById('Modal1');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('Brown');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption1");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
};

// Get the modal
var modal = document.getElementById('Modal2');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('Newport');
var modalImg = document.getElementById("img02");
var captionText = document.getElementById("caption2");
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

// Get the modal
var modal = document.getElementById('Modal2');

此代码将 Dom 元素 Modal2 分配给包含 Modal1 Dom 元素的同一个模态变量，因此您删除了对第一个模特，现在你无法联系到他并把他隐藏起来。