bootstrap-modal - 带有模态的 Bootstrap 4 beta 图像库

Question

我正在尝试制作一个图片库，每个图片都有一个模态。我希望单击每个徽标并在模态中打开该公司的推荐信。这是我尝试过的，但是每个徽标在单击时只会打开模态中的硬石字母。这是我尝试使用的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="#hr" 并更改每个图像的目标。

 <div class="col-6 col-sm-4 col-md-3 col-lg-2"><div class="container">
		<img class="img-fluid" data-toggle="modal" data-target="#hr" alt="Hard Rock" src="http://www.pscompetitiveedge.com/references/logos/hardrock4.gif">
<!-- The modal -->
<div class="modal fade" id="hr" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-danger close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<img class="img-fluid" alt="Hard Rock" src="http://www.pscompetitiveedge.com/references/ltrs/hardrock.jpg">
</div>
  <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
         </div></div></div></div></div>
</div>