多个JavaScript模态并关闭它们

我正试图为我的高级图形设计课程整理我的网站组合，我对JavaScript和modals有一个问题

基本上，我有一个包含六张照片的图库，我希望能够点击一张照片并有一个模式弹出窗口，它是图像的幻灯片（但不是页面上的其他五张图像）。但目前，我无法在向第二个图像添加模态后关闭模态。它会为每个用户显示，但不会关闭。我做错了什么

以下是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>

布朗大学
×
纽波特
×
关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=function（）{
modal.style.display=“无”；
};

---

这段代码将Dom元素

Modal2

分配给包含

Modal1

Dom元素的同一个模态变量，因此您删除了对第一个模型的引用，现在您无法联系到他并将他从Dom中隐藏起来。

哇，我觉得错过这一点像个白痴。可能是因为整天盯着代码看。谢谢没关系，发生在我们最好的人身上。顺便说一下，如果您使用的是

let

而不是

var

，您会得到一个错误：

“model”已经声明了

@泰德·莫恩，好吧，现在我有一个不同的问题。即使将第二个模式的所有声明更改为不同的声明，我也无法关闭该模式。我试过只使用一个modal.style.display=“none”，我试过两个单独的，我不知道是什么wrong@tedmau5e请单独提问。

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

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