我页面上的多个模态显示相同的图像

Question

我一直在研究试图找出为什么这样做，也许我只是不理解模态。 IDK。

无论如何，我是从一个灯箱开始的： https ://www.w3schools.com/howto/tryit.asp?filename =tryhow_css_js_lightbox

并将正文更改为：

<body>
    <h2 style="text-align:center">Title</h2>
    <div class="row">
      <div class="column">
        <img src="img_nature.jpg" style="width:100%"                     
             onclick="openModal();currentSlide(1)" 
             class="hover-shadow cursor">
      </div>
    </div>

    <div id="myModal" class="modal">
     <span class="close cursor" onclick="closeModal()">&times;</span>
     <div class="modal-content">

         <div class="mySlides">
             <div class="numbertext">1 / 4</div>
             <img src="img_nature_wide.jpg" style="width:100%">
         </div>

         <div class="mySlides">
             <div class="numbertext">2 / 4</div>
             <img src="img_fjords_wide.jpg" style="width:100%">
         </div>

         <div class="mySlides">
             <div class="numbertext">3 / 4</div>
             <img src="img_mountains_wide.jpg" style="width:100%">
         </div>

         <div class="mySlides">
             <div class="numbertext">4 / 4</div>
             <img src="img_lights_wide.jpg" style="width:100%">
         </div>

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

         <div class="caption-container">
             <p id="caption"></p>
         </div>
     </div>
</div>

在模态中创建单个图像并滚动浏览。 我喜欢它，并且我认为它可以解决我的问题。 唉

当我在网页上实现它时，它就起作用了。 但是后来我复制并粘贴了它，并将其放在页面的另一个区域中，更改了图像，但它仍显示第一个模态中的原始图像。 所以我不知道该去哪里。

我在jscript，jquery方面有0位经验。 （这些课程尚未在我的学校进行……）。

我刚在想：
1.）将图像放在外部html页面上，并导入我看过的AJAX，但我感到困惑。 （不必一定要使用引导程序）

我查看了这些资源，它们对您有所帮助，但是再次，我不知道如何根据我的需要来制作它们。

使用Bootstrap
模态，未导入的html
情态

见笔工作问题由迈克尔Barnhouse（ @ Kardee785上） CodePen 。

Answer 1

因此，正如Curious 13和Nate Whittaker建议的那样，我需要使每个部分都有其自己的唯一ID。 我已经发布了那行不通的原因，它行不通的原因是因为我的.js没有读取/导入要显示的内容。 因此，我必须在js中创建一个var（名为modalId），然后将该信息调用到modal的打开，关闭和导航中。

这是.js，我有一位朋友帮助我。

function openModal(modalId) {
  document.getElementById(modalId).style.display = "block";
}

function closeModal(modalId) {
  document.getElementById(modalId).style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(modalId, n) {
  showSlides(modalId, slideIndex += n);
}

function currentSlide(modalId, n) {
  showSlides(modalId, slideIndex = n);
}

function showSlides(modalId, n) {
  var i;
  var modal = document.getElementById(modalId);
  var slides = modal.getElementsByClassName("mySlides");
  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;
}

我页面上的多个模态显示相同的图像

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-04-04 18:03:14

我页面上的多个模态显示相同的图像

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-04-04 18:03:14

解决方案1
0 已采纳 2018-04-04 18:03:14