Question

我在创建具有模式弹出窗口的图片库时遇到问题，在该模式下，单击图像时，它会分别弹出6张图像，并包含一个关闭/ x按钮以关闭图像弹出窗口。我在下面的代码中有2个变体（1个带脚本，1个不带脚本）；但是，当我对所有图像使用脚本时，我完全迷失了，只有第一个有效，而使用第二个变体却没有。感谢您的任何帮助，谢谢！！

<section>
    <div class="container">
        <div class="row">
            <div class ="col-lg-12">
                <h2>Photo Gallery</h2>
            </div>   

            <div class="col-lg-3 col-md-4 col-sm-6">           
                <img id="myImg" src="imgs/1.jpg" alt="Rage, Flower Thrower" style="width:100%;max-width:300px">

                <div id="myModal" class="modal">
                    <span class="close">&times;</span>
                    <img class="modal-content" id="img01">
                    <div id="caption"></div>
                </div>

                <script>

                    var modal = document.getElementById('myModal');
                    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;
                    }

                    var span = document.getElementsByClassName("close")[0];

                    span.onclick = function() { 
                        modal.style.display = "none";
                    }
                </script>
            </div>

            <div class="col-lg-3 col-md-4 col-sm-6">
                <a href="imgs/2.jpg" class="modal">
                    <img src="imgs/2.jpg">
                </a>
            </div>
        </div>
    </div>
</section>

照片库，模态，HTML和Bootstrap3

0 个答案: