Question

我正在尝试将我的网站组合整合到Web类的高级图形设计中，并且我遇到了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元素的相同模态变量，因此您删除了对第一个模型的引用，现在您无法联系到他并将他从dom中隐藏起来。

多个JavaScript模式并关闭它们

1 个答案: