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）

我已经查看了这些资源，但他们又有所帮助，我不知道如何根据我的需要制作它们。

using Bootstrap
modals, nonimported html
modals

请参阅Work issue上Michael Barnhouse（@Kardee785）的笔CodePen。

Answer 1

好像13，和Nate Whittaker建议我需要让每个部分都有自己独特的ID。我发布了那些不起作用的原因，并且它没有工作的原因是因为我的.js没有阅读/导入要显示的内容。所以我不得不在js中创建一个var（名为modalId），然后将该信息调用到模态的打开，关闭和导航中。

这是.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 个答案: