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

Posted 2023-05-08

【中文标题】Bootstrap 4 Modal 在 Slick carousel div 内部不起作用

【英文标题】：Bootstrap 4 Modal is not working Inside Slick carousel div

【发布时间】：2021-01-13 01:41:40

【问题描述】：

经过大量搜索，进行大量调试后，我发现在光滑的轮播 div 内部，引导模式没有显示。只显示一个灰色的dropback。

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

提前谢谢你

 <?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); ?>"  ></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>

【参考方案1】：

我认为您应该像这样将模式代码部分移到轮播部分之外：

<?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).'"  ></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>

【讨论】：

感谢您的回答。 javascript 附近的.company-logo 有一个缺口，我修复了这个问题，slick 正在工作，模态正在显示但只显示一家公司。

显示一家公司是指只生成一个modal的html还是生成了所有modal的html但只显示一个？

我查看了源代码，在id="modal_contents"里面生成了所有的公司模型。但该图像只是与该公司超链接的一张。因此点击它，只为该公司打开模式。

@mimi 我的代码有错误 - $carousel_content = 应该是 $carousel_content .= 在 while 循环中，我已经更新了答案的代码部分

是的，现在它运行良好！谢谢，已采纳。