html - 投资组合显示相同的图片而不是不同的图片 - html、css

Question

我正在尝试在我的网站上的投资组合部分显示一些图片。在投资组合的背景上，您可以看到不同的图片，但是当我单击“显示详细信息”时，它会在同一页面上打开新窗口，但图片都是相同的，而不是不同的......它在两者中都显示 pic1.png，而不是 pic1.png 和 pic2.png。

请帮帮我，我快疯了。

这是我的 HTML 代码

<!-- PORTFOLIO IMAGE 1 -->
    <div class="col-md-4 ">
      <div class="grid mask">
        <figure> <img class="img-responsive" src="assets/img/portfolio/slika1.png" alt="">
          <figcaption>
            <h5>UX / UI</h5>
            <a data-toggle="modal" href="#myModal" class="btn btn-default">More Details</a> </figcaption>
          <!-- /figcaption --> 
        </figure>
        <!-- /figure --> 
      </div>
      <!-- /grid-mask --> 
    </div>

    <!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
                          a modal for each of your projects. -->

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Project Title</h4>
          </div>
          <div class="modal-body">
            <p><img class="img-responsive" src="assets/img/portfolio/slika1.png" alt=""></p>
            <p>Content1</p>
            <p><b><a href="#">Visit Site</a></b></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
        <!-- /.modal-content --> 
      </div>
      <!-- /.modal-dialog --> 
    </div>
    <!-- /.modal --> 

    <!-- PORTFOLIO IMAGE 1 -->
    <div class="col-md-4 ">
      <div class="grid mask">
        <figure> <img class="img-responsive" src="assets/img/portfolio/slika2.png" alt="">
          <figcaption>
            <h5>UX / UI</h5>
            <a data-toggle="modal" href="#myModal" class="btn btn-default">More Details</a> </figcaption>
          <!-- /figcaption --> 
        </figure>
        <!-- /figure --> 
      </div>
      <!-- /grid-mask --> 
    </div>

    <!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
                          a modal for each of your projects. -->

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Project Title</h4>
          </div>
          <div class="modal-body">
            <p><img class="img-responsive" src="assets/img/portfolio/slika2.png" alt=""></p>
            <p>Content2</p>
            <p><b><a href="#">Visit Site</a></b></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
        <!-- /.modal-content --> 
      </div>
      <!-- /.modal-dialog --> 
    </div>
    <!-- /.modal --> 
</div>

谢谢你们

Answer 1

您需要为不同的模式设置不同的 ID:

改变:

<div class="modal fade" id="myModal"

到

<div class="modal fade" id="myModal2"

在第二个模态上

同时更新链接引用:

<a data-toggle="modal" href="#myModal2"