Php 引导4模式在光滑的旋转木马分区内不工作
在进行了大量搜索和调试之后,我发现在slick carousel div中,引导模式没有显示出来。只显示一个灰色的后退 这里是代码:在这段代码中,我们从数据库中获取详细信息,并使用slick显示图像,当有人单击这些图像时,它将打开该图像的模式。但除了这个,一切都很好。如何在slick div中调用modal 先谢谢你Php 引导4模式在光滑的旋转木马分区内不工作,php,jquery,twitter-bootstrap,bootstrap-4,slick.js,Php,Jquery,Twitter Bootstrap,Bootstrap 4,Slick.js,在进行了大量搜索和调试之后,我发现在slick carousel div中,引导模式没有显示出来。只显示一个灰色的后退 这里是代码:在这段代码中,我们从数据库中获取详细信息,并使用slick显示图像,当有人单击这些图像时,它将打开该图像的模式。但除了这个,一切都很好。如何在slick div中调用modal 先谢谢你 <?php $ush = $mysqli->prepare("SELECT company_id, img, name from list");
<?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>
$(文档).ready(函数(){
$('.company logo')。光滑({
点:是的,
无限:错,
速度:300,,
幻灯片放映:14,
幻灯片滚动:14,
箭头:错,
响应:[{
断点:768,
设置:{
幻灯片放映:4,
幻灯片滚动:4
}
}]
})
});
谢谢您的回答。在javascript附近的.company logo
中有一个缺口,我修正了,slick正在工作,modal正在显示但只显示一个公司。显示一个公司是指只生成一个modal的html还是所有modal的html生成但只显示一个?我检查了id=“modal\u contents”中的源代码
生成所有公司模型。但这张图片是唯一一张与该公司超链接的图片。因此,单击该按钮,仅打开该公司的模式。@mimi我的代码中有一个错误-$carousel\u content=
应该是$carousel\u content.=
在while循环中,我已经更新了答案的代码部分是的,现在它工作得很好!谢谢,答案已被接受。