Bootstrap 4 Modal在Slick轮播div内部不起作用

如何解决Bootstrap 4 Modal在Slick轮播div内部不起作用

经过大量搜索，大量调试之后，我发现在光滑的轮播div中，没有显示引导程序模式。仅显示灰色回退。

这里是代码：在此代码中，我们从数据库中获取详细信息，并流畅地显示图像，当有人单击这些图像时，它将打开该图像的模式。但是除此之外，一切都很好。如何在Slick div中调用模态。

提前谢谢

 <?PHP
 $ush = $MysqLi->prepare("SELECT company_id,img,name from list");
 $ush->execute();
 $ush->store_result();
 $ush->bind_result($u_bid,$u_bimg,$u_bname);
 ?>
<div class="company-logo">
<?PHP
while($ush->fetch()){
?>
<div>
  <a href="#<?PHP echo $u_bid;?>" data-toggle="modal" data-target="#<?PHP echo $u_bid;?>"><img 
 src="data:image/png;base64,<?PHP echo base64_encode($u_bimg); ?>" height="80px" width="80px"></a>
<!-- Modal -->
 <div class="modal" id="<?PHP echo $u_bid;?>" tabindex="-1" role="dialog" aria-labelledby="<?PHP echo $u_bid;?>" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modal-md" role="document">
     <div class="modal-content">
       <div class="modal-body">
         <div class="container text-center">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><h3><b>X</b></h3></span>
          </button>
          <h3><?PHP echo $u_bname;?></h3> 
         </div>
       </div>
      </div>
    </div>
   </div>
 </div>
 <?PHP
 }
   $ush->close();
 ?>
 </div>
 <script type="text/javascript">
     $(document).ready(function(){
      $('.company-logo').slick({
              dots:true,infinite:false,speed:300,slidesToShow:14,slidesToScroll:14,arrows:false,responsive:[{
                      breakpoint:768,settings:{
                                slidesToShow:4,slidesToScroll:4
                               }
                     }]
              })
           });
  </script>

解决方法

我认为您应该将模式代码部分移到轮播部分之外，如下所示：

<?php
 $ush = $mysqli->prepare("SELECT company_id,img,name from list");
 $ush->execute();
 $ush->store_result();
 $ush->bind_result($u_bid,$u_bimg,$u_bname);
 
$carousel_content = '';
$modal_content = '';
while($ush->fetch()){
 $carousel_content .= '<div>
  <a href="#'.$u_bid.'" data-toggle="modal" data-target="#'.$u_bid.'"><img 
 src="data:image/png;base64,'.base64_encode($u_bimg).'" height="80px" width="80px"></a>    
 </div>';
 $modal_content .= '<!-- Modal -->
 <div class="modal" id="'.$u_bid.'" tabindex="-1" role="dialog" aria-labelledby="'.$u_bid.'" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modal-md" role="document">
     <div class="modal-content">
       <div class="modal-body">
         <div class="container text-center">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><h3><b>X</b></h3></span>
          </button>
          <h3>'.$u_bname.'</h3> 
         </div>
       </div>
      </div>
    </div>
   </div>';
?>

 <?php
 }
   $ush->close();
 ?>
 <div class="company-logo"><?=$carousel_content?></div>

 <div id="modal_contents"><?=$modal_content?></div>

 <script type="text/javascript">
     $(document).ready(function(){
      $('.company-logo').slick({
              dots:true,infinite:false,speed:300,slidesToShow:14,slidesToScroll:14,arrows:false,responsive:[{
                      breakpoint:768,settings:{
                                slidesToShow:4,slidesToScroll:4
                               }
                     }]
              })
           });
  </script>