已经使用引导卡显示了来自数据库的数据。所有这些卡都有Read more按钮。一旦点击Read More,模态应该获取特定行的详细信息并显示。视图如下所示
代码如下:
使用卡查看的代码
<div class="row clearfix">
<?php
$query = $this->db->query("SELECT * FROM services_offered LIMIT 15");
foreach ($query->result() as $row) {
echo "<div class='col-lg-4 bottommargin-sm'>";
echo "<div class='feature-box media-box fbox-bg'>";
echo "<div class='fbox-media'>";
echo "<a href='#'><img src='$row->swo_images' alt='Featured Box Image' style='height:250px; width:450px;'></a></div>";
echo "<div class='fbox-content fbox-content-lg'>";
$string = $row->swo_brief_intro;
$string = word_limiter($string, 15);
echo "<h3 class='nott ls0 font-weight-semibold'>$row->swo_image_heading<span class='subtitle font-secondary font-weight-light ls0'>$string</span></h3>";
echo "<a href='fetchDetails' class='button-link border-0 color btn-edit' data-toggle='modal' data-target='#whatwedo'>Read More</a>";
echo "</div>";
echo "</div>";
echo "</div>";
}
?>
应加载的模态代码:
<?php
$query = $this->db->query("SELECT * FROM services_offered");
foreach ($query->result() as $row) {
echo "<div class='modal fade' id='whatwedo' tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true'>";
echo "<div class='modal-dialog' >";
echo "<div class='modal-content'>";
echo "<div class='modal-header'>";
echo "<h5 class='modal-title' id='exampleModalLabel'>$row->swo_image_heading</h5>";
echo "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>";
echo " <span aria-hidden='true'>×</span>";
echo "</button>";
echo "</div>";
echo "<div class='modal-body'>";
echo "..";
echo "</div>";
echo "<div class='modal-footer'>";
echo "<button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>";
echo "<button type='button' class='btn btn-primary'>Save changes</button>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
}
?>
控制器代码
public function fetchDetails($id)
{
$this->db->where('id',$id);
$query = $this->db->query("SELECT * FROM services_offered");
return $query->result();
}
1条答案
按热度按时间pieyvz9o1#
您应该为每个模态或服务给予不同的模态ID,每个服务的ID必须唯一。
为按钮给予ID
并给予情态同样的本义
你可以在你的数据库中使用服务id或者给予它一个唯一的名字确保按钮和模态有相同的id。