带模态的Bootstrap 4 beta图库

Question

我正在尝试制作一个图像库，每个图像都有一个模态。我希望点击每个徽标并在模态中打开该公司的参考字母。这是我尝试过的，但点击时每个徽标只打开模态中的hardrock字母。这是我尝试做的link to a codepen。

我做错了什么？感谢

    /* show lightbox when clicking a thumbnail */
    $('a.thumb').click(function(event){
    	event.preventDefault();
    	var content = $('.modal-body');
    	content.empty();
      	var title = $(this).attr("title");
      	$('.modal-title').html(title);      	
      	content.html($(this).html());
      	$(".modal-profile").modal({show:true});
    });

.modal-body {
  margin:auto;
  max-width:100%;
}

<!-- image trigger modal -->
<a data-target="#myModal" data-toggle="modal">
  <img src="http://www.pscompetitiveedge.com/references/logos/hardrock4.gif" class="thumbnail img-fluid" alt="Hard Rock">
</a>
<!-- Modal -->
<div tabindex="-1" class="modal fade" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
         </div>
      <div class="modal-body">
        <img src="http://www.pscompetitiveedge.com/references/ltrs/hardrock.jpg" class="img-fluid">
      </div>
      <div class="modal-footer">
        <button class="btn btn-warning" type="button" data-dismiss="modal">Close</button>
       </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- image trigger modal -->
<a data-target="#myModal" data-toggle="modal">
  <img src="http://www.pscompetitiveedge.com/references/logos/paragon.jpg" class="thumbnail img-fluid" alt="Hard Rock">
</a>
<!-- Modal -->
<div tabindex="-1" class="modal fade" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
         </div>
      <div class="modal-body">
        <img src="http://www.pscompetitiveedge.com/references/ltrs/paragon.jpg" class="img-fluid">
      </div>
      <div class="modal-footer">
        <button class="btn btn-warning" type="button" data-dismiss="modal">Close</button>
       </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- image trigger modal -->
<a data-target="#myModal" data-toggle="modal">
  <img src="http://www.pscompetitiveedge.com/references/logos/USHomeLogo.jpg" class="thumbnail img-fluid" alt="US Home">
</a>
<!-- Modal -->
<div tabindex="-1" class="modal fade" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
         </div>
      <div class="modal-body">
        <img src="http://www.pscompetitiveedge.com/references/ltrs/ushome.jpg" class="img-fluid">
      </div>
      <div class="modal-footer">
        <button class="btn btn-warning" type="button" data-dismiss="modal">Close</button>
       </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

我解决了这个问题。通过添加data-target =＆＃34; #hr＆＃34;并改变每个图像的目标。

＆＃13;

＆＃13;

keytool -exportcert -list -v \-alias <your-key-name> -keystore <path-to-production-keystore>

＆＃13;

＆＃13;

＆＃13;