简体   繁体   中英

Image not able to pop up when using Modal

Although I have differentiated between the modals, only the first modal works but the second modal pops up the image for the first modal although the source image is that of the second modal. Can someone please assist me in sorting this issue out?

<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>

You reference modal1 in both links,update:

data-target="#modal2"

Fiddle

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM