同一页面上的多个 w3Schools 灯箱（模态框）：模态框仅显示第一个模态的内容

Question

我对 HTML/CSS 还是个新手，对 Javascript 一无所知。我需要在带有按钮选项卡的页面上放置三个图像灯箱，其中每个按钮都会显示一个带有灯箱的页面。我最初使用的是 W3Schools 灯箱代码 (https://www.w3schools.com/howto/howto_js_lightbox.asp)，但我在这里和那里进行了更改。

选项卡中的所有图像看起来都不错，但是当您单击它们时，它们会弹出第一个 lightbox/modal 的内容。我还注意到我的 previous/next 按钮现在只会浏览内容一次，然后点击几下就会变成空白。这不是我最关心解决的问题，但也许它会让某人了解问题所在。

我尝试了很多可能的解决方案，包括更改 class 名称和 ID 名称（因为我知道你不应该有多个具有相同 ID 名称的 div），但它对我不起作用，所以我将代码恢复到开始时的状态。我什至更改了模态框拾取的幻灯片编号，使第二个模态框的幻灯片编号为 4、5、6 而不是 1、2、3，但仍然没有成功。有什么想法吗？

谢谢！

HTML、CSS 和 JAVASCRIPT 下面。请注意，javascript 在 HTML 文件中，因为我的文档中就是这样，所以我想我会保持一切一致。另外看起来代码中有很多错误 - 抱歉，我不知道如何修复它们：/

html
{
    width:500px;
    margin:auto;
}

/* BUTTON COLORS */
.light-blue
    {background-color: #4e9abe;}
.pea-green
    {background-color: #a39a4b;}
.teal
    {background-color: #298e86;}



/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 10px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #ffffff;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  line-height:1.3;
}



/* The Close Button */
.close {
  color: #999900;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #4e7977;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


.next a, .prev a
{
    text-decoration: none;
}


.modal-images
{max-height:75vh;
    max-width:auto;
    border-radius:5%;
    border:2px dotted;
    display: inline;
    }

/* Style the tab */
.tab {
    overflow: hidden;
}

/* Style the buttons inside the tab */
.tab button {
   
    display: inline-block;
    width:133px;
    height:133px;
    line-height: 20px;
    margin:4px;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    letter-spacing: 2px;
    font-size:18px;
    font-weight:bold;
    text-transform: uppercase;
    border:none;
}


.topright:hover {color: red;}

/* Change background color of buttons on hover */
.tab button:hover {
    background: #746572;}

/* Create an active/current tablink class */

.tab button.active {
    border: 3px #505050 dashed;
    padding:5px;
    opacity: 0.5;
    outline:none;
}
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    width:100%;
}


/* Style the close button */
.topright {
    float: right;
    cursor: pointer;
    font-size: 28px;
}

<!DOCTYPE html>


    
    
<script>
    // Open the Modal
    function openModal() 
    {document.getElementById('myModal').style.display = "block";}
    // Close the Modal
    function closeModal()
    {document.getElementById('myModal').style.display = "none";}
    var slideIndex = 1;
    showSlides(slideIndex);
    // Next/previous controls
    function plusSlides(n)
    {showSlides(slideIndex += n);}
    // Thumbnail image controls
    function currentSlide(n) 
    {showSlides(slideIndex = n);}
    function showSlides(n)
    {var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    var captionText = document.getElementById("caption");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++)
    {slides[i].style.display = "none";}
    for (i = 0; i < dots.length; i++)
    {dots[i].className = dots[i].className.replace(" active", "");}
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    captionText.innerHTML = dots[slideIndex-1].alt;}
</script>


<!--JAVASCRIPT FOR KEYBOARD NAVIGATION (PREV, NEXT, AND ESCAPE BUTTONS)-->
<script>
    document.onkeydown = function (e) 
    {e = e || window.event;
    if (e.keyCode == 37) {document.querySelector('.prev').click();}
    if (e.keyCode == 27) {document.querySelector('.close').click();}    
    else if (e.keyCode == 39) {document.querySelector('.next').click();}};
</script>



<div class="tab">
    <button class="tablinks pea-green" onclick="openCity(event, 'tab1')">Tab 1</button>
  
    <button class="tablinks light-blue" onclick="openCity(event, 'tab2')">Tab 2</button>
  
    <button class="tablinks teal" onclick="openCity(event, 'tab3')">Tab 3 </button>
</div>


<div id="tab1" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 1, Modal 1
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 2, Modal 1
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 3, Modal 1
    </div>
    

    
    
     <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>   
   
    
    
       
    
    
   
</div>
  

      
<div id="tab2" class="tabcontent">
   <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 4, Modal 2
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 5, Modal 2
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 6, Modal 2
    </div>
    

    
    
     <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>


</div>
</div>  

<div id="tab3" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 7, Modal 3
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 8, Modal 3
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 9, Modal 3
    </div>
    
    
    <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>
    
  
    
</html>

Answer 1

您的脚本无法运行，因为您将它放在了它试图访问的 DOM 元素之前。 HTML 文档是从上到下解析的，因此脚本将在创建元素之前执行。因此，您需要将脚本放在 DOM 元素之后。

此外，您有 9 个元素的 class 为 mySlides，因此您的 showSlide 函数将不起作用。我已经改变了你的逻辑来检查要显示的幻灯片的数量是大于 3（设置为 1）还是小于 1（设置为 3）。

html
{
    width:500px;
    margin:auto;
}

/* BUTTON COLORS */
.light-blue
    {background-color: #4e9abe;}
.pea-green
    {background-color: #a39a4b;}
.teal
    {background-color: #298e86;}



/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 10px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #ffffff;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  line-height:1.3;
}



/* The Close Button */
.close {
  color: #999900;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #4e7977;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


.next a, .prev a
{
    text-decoration: none;
}


.modal-images
{max-height:75vh;
    max-width:auto;
    border-radius:5%;
    border:2px dotted;
    display: inline;
    }

/* Style the tab */
.tab {
    overflow: hidden;
}

/* Style the buttons inside the tab */
.tab button {
   
    display: inline-block;
    width:133px;
    height:133px;
    line-height: 20px;
    margin:4px;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    letter-spacing: 2px;
    font-size:18px;
    font-weight:bold;
    text-transform: uppercase;
    border:none;
}


.topright:hover {color: red;}

/* Change background color of buttons on hover */
.tab button:hover {
    background: #746572;}

/* Create an active/current tablink class */

.tab button.active {
    border: 3px #505050 dashed;
    padding:5px;
    opacity: 0.5;
    outline:none;
}
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    width:100%;
}


/* Style the close button */
.topright {
    float: right;
    cursor: pointer;
    font-size: 28px;
}

<!DOCTYPE html>
<html>  



<!--JAVASCRIPT FOR KEYBOARD NAVIGATION (PREV, NEXT, AND ESCAPE BUTTONS)-->
<script>
    document.onkeydown = function (e) 
    {var e = e || window.event;
    if (e.keyCode == 37) {
    e.preventDefault();
    document.querySelectorAll('.prev')[0].click();}
    if (e.keyCode == 27) {
    e.preventDefault();
    document.querySelectorAll('.close')[0].click();}    
    else if (e.keyCode == 39) {
    e.preventDefault();
    document.querySelectorAll('.next')[0].click();}};
</script>



<div class="tab">
    <button class="tablinks pea-green" onclick="openCity(event, 'tab1')">Tab 1</button>
  
    <button class="tablinks light-blue" onclick="openCity(event, 'tab2')">Tab 2</button>
  
    <button class="tablinks teal" onclick="openCity(event, 'tab3')">Tab 3 </button>
</div>


<div id="tab1" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 1, Modal 1
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 2, Modal 1
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 3, Modal 1
    </div>
    

    
    
     <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>   
   
    
    
       
    
    
   
</div>
  

      
<div id="tab2" class="tabcontent">
   <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 4, Modal 2
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 5, Modal 2
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 6, Modal 2
    </div>
    

    
    
     <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>


</div>
</div>  

<div id="tab3" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 7, Modal 3
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 8, Modal 3
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 9, Modal 3
    </div>
    
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
</div>
<script>
    // Open the Modal
    function openModal() 
    {document.getElementById('myModal').style.display = "block";}
    // Close the Modal
    function closeModal()
    {document.getElementById('myModal').style.display = "none";}
    var slideIndex = 1;
    showSlides(slideIndex);
    // Next/previous controls
    function plusSlides(n)
    {
    showSlides(slideIndex += n);
    }
    // Thumbnail image controls
    function currentSlide(n) 
    {showSlides(slideIndex = n);}
    function showSlides(n)
    {var i;
    var slides = document.getElementsByClassName("mySlides");
    //var dots = document.getElementsByClassName("demo");
    var captionText = document.getElementById("caption");
    if (n > 3) {slideIndex = 1}
    if (n < 1) {slideIndex = 3}
    for (i = 0; i < slides.length; i++)
    {slides[i].style.display = "none";}
    //for (i = 0; i < dots.length; i++)
    //{dots[i].className = dots[i].className.replace(" active", "");}
    slides[slideIndex-1].style.display = "block";
    //dots[slideIndex-1].className += " active";
    //captionText.innerHTML = dots[slideIndex-1].alt;
    }
</script>
<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>
    
  
    
</html>

Answer 2

你真的只想要一个带有 #myModal id 的元素，所以基本上，我只是删除了一堆冗余代码并将你的 .tabcontent 标记移到模态标记之外。然后我将 currentSlide() 函数参数更改为它们各自的图像总数索引。这样，例如，当您单击 image5 时，模式实际上打开到 image5。参见 http://jsfiddle.net/qryu0dmL/19/

<script>
    // Open the Modal
    function openModal() 
    {document.getElementById('myModal').style.display = "block";}
    // Close the Modal
    function closeModal()
    {document.getElementById('myModal').style.display = "none";}
    var slideIndex = 1;
    showSlides(slideIndex);
    // Next/previous controls
    function plusSlides(n)
    {showSlides(slideIndex += n);}
    // Thumbnail image controls
    function currentSlide(n) 
    {showSlides(slideIndex = n);}
    function showSlides(n)
    {var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    var captionText = document.getElementById("caption");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++)
    {slides[i].style.display = "none";}
    for (i = 0; i < dots.length; i++)
    {dots[i].className = dots[i].className.replace(" active", "");}
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    captionText.innerHTML = dots[slideIndex-1].alt;}
</script>


<!--JAVASCRIPT FOR KEYBOARD NAVIGATION (PREV, NEXT, AND ESCAPE BUTTONS)-->
<script>
    document.onkeydown = function (e) 
    {e = e || window.event;
    if (e.keyCode == 37) {document.querySelector('.prev').click();}
    if (e.keyCode == 27) {document.querySelector('.close').click();}    
    else if (e.keyCode == 39) {document.querySelector('.next').click();}};
</script>



<div class="tab">
    <button class="tablinks pea-green" onclick="openCity(event, 'tab1')">Tab 1</button>

    <button class="tablinks light-blue" onclick="openCity(event, 'tab2')">Tab 2</button>

    <button class="tablinks teal" onclick="openCity(event, 'tab3')">Tab 3 </button>
</div>


<div id="tab1" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
<div id="tab2" class="tabcontent">
   <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="openModal();currentSlide(4)">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="openModal();currentSlide(5)">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="openModal();currentSlide(6)">
</div>  
<div id="tab3" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="openModal();currentSlide(7)">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="openModal();currentSlide(8)">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="openModal();currentSlide(9)">
</div>  


    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">

    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 1, Modal 1
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 2, Modal 1
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 3, Modal 1
    </div>



    <!--CLICKED-ON IMAGES IN MODAL BOX-->


    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 4, Modal 2
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 5, Modal 2
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 6, Modal 2
    </div>



    <!--CLICKED-ON IMAGES IN MODAL BOX-->


    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 7, Modal 3
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 8, Modal 3
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 9, Modal 3
    </div>

         <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

同一页面上的多个 w3Schools 灯箱（模态框）：模态框仅显示第一个模态的内容

Multiple w3Schools Lightboxes (Modal Boxes) on same page: modal boxes only showing first modal's content

html

javascript

css

modal-dialog

lightbox