使用Modal时无法弹出图像

时间:2017-02-14 10:31:42

标签: javascript jquery twitter-bootstrap bootstrap-modal

虽然我已经区分了模态,但只有第一个模态可以工作,但第二个模态弹出第一个模态的图像,尽管源图像是第二个模态的图像。有人可以帮我解决这个问题吗?

<div class="col-xs-6 col-md-3">
  <div class="portfolio-item">
    <img class="img-portfolio img-responsive" src="img/arnold200x200.png" data-toggle="modal" data-target="#modal1">
    <div class="caption">
      <h3>Amino X</h3>
      <p>
        <a href="#" class="btn btn-primary" role="button">GHS 200</a>
      </p>
    </div>
  </div>
</div>

<!-- Modal AminoX-->
<div class="modal fade" id="modal1">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <a href="img/arnold.png" data-title="My First Caption" data-toggle="modal" />
        <h4 class="modal-title">Amino X</h4>
      </div>
      <div class="modal-body">
        <img src="img/arnold.png" width="350px" class="img-thumbnail" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="col-xs-6 col-md-3">
  <div class="portfolio-item">
    <img class="img-portfolio img-responsive" src="img/amino_x200x200.png" data-toggle="modal" data-target="#modal1" />
    <div class="caption">
      <h3>Amino X</h3>
      <p>
        <a href="#" class="btn btn-primary" role="button">GHS 200</a>
      </p>
    </div>
  </div>
</div>

<!-- Modal AminoX-->
<div class="modal fade" id="modal2">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <a href="img/amino_x200x200.png" data-title="My Second Caption" data-toggle="modal" />
        <h4 class="modal-title">Amino X</h4>
      </div>
      <div class="modal-body">
        <img src="img/aminoBig.png" width="350px" class="img-thumbnail" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal2">Close</button>
      </div>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

您在两个链接中引用modal1,更新:

data-target="#modal2"

Fiddle