具有模式的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>