在CodeIgniter中单击图像时,如何在弹出模式中显示特定图像?

jchrr9hc  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(139)

已经使用引导卡显示了来自数据库的数据。所有这些卡都有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'>&times;</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();
    }
pieyvz9o

pieyvz9o1#

您应该为每个模态或服务给予不同的模态ID,每个服务的ID必须唯一。
为按钮给予ID

echo "<a href='fetchDetails' class='button-link border-0 color btn-edit' data-toggle='modal' data-target='#idmodal'>Read More</a>";

并给予情态同样的本义

echo "<div class='modal fade' id='idmodal' tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true'>";

你可以在你的数据库中使用服务id或者给予它一个唯一的名字确保按钮和模态有相同的id。

相关问题