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

【问题标题】：Multiple w3Schools Lightboxes (Modal Boxes) on same page: modal boxes only showing first modal's content同一页面上的多个 w3Schools 灯箱（模态框）：模态框仅显示第一个模态的内容
【发布时间】：2018-07-23 17:59:56
【问题描述】：

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

标签中的所有图像看起来都很好，但是当您单击它们时，它们会弹出第一个灯箱/模式的内容。我还注意到，我的上一个/下一个按钮现在只会浏览一次内容，然后单击几下就会变为空白。这不是我最关心修复的问题，但也许它会让某人了解问题所在。

我尝试了许多可能的解决方案，包括更改类名和 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>

【问题讨论】：

    标签： javascript html css modal-dialog lightbox


    【解决方案1】：

    您真的只想要一个具有#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>

    【讨论】：

    • 谢谢——这绝对允许每个模态框从点击的图像中提取内容，但是当我使用上一个/下一个按钮时，它会滚动其他模态框的内容。因此，点击时灯箱编号一的模态图像向我显示图像 1、2、3（根据需要），然后继续显示 4、5、6、7、8、9。与第 2 和第 3 灯箱相同，开始正确的图像，然后滚动浏览所有其他模态框中的图像。关于为什么会这样的任何想法？ :o
    • 我认为这是理想的行为。您是否只希望模态循环遍历每组 3 个？
    • 是的。所以，基本上，我正在制作一个平面设计作品集页面。一个标签是“海报”，一个是“徽标”，一个是“插图”，所以当您单击第一个标签时，我想要一个只有海报图片的灯箱，第二个标签只是徽标等。这可能吗？对不起，我应该更清楚。非常感谢你的帮助！非常感谢。
    • 之前，第一个模态框很好——当您单击图像时，它会拉出第一个模态框的图像。问题是，当您单击第二个和第三个模态框的图像时，它们也会拉出第一个模态框的图像，而不是像我想要的那样拉出第二个和第三个。
    • 这绝对是可能的，但如果不完全重构代码，这似乎很棘手。我个人建议实现一个像这样的 jQuery 滑块插件，除非因为某些原因你不能使用它：kenwheeler.github.io/slick
    【解决方案2】：

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

    此外，您有 9 个元素，其类为 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>

    【讨论】：

    • 这段代码仍然和我原来的帖子一样。当我单击第二个或第三个选项卡并单击图像时，弹出的模态框仍然是第一个模态框的模态框。当我单击选项卡 3 上的图像 7 时，图像 1 会在模式框中弹出。我可以做些什么来解决这个问题吗？
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-06-14
    • 1970-01-01
    • 2015-09-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode