如何在 codeigniter 中显示动态模态弹出窗口

时间:2021-02-11 09:54:10

标签: codeigniter bootstrap-modal

我正在开发一个 Codeigniter 项目,该项目以卡片的形式显示数据库信息,并提供“阅读更多”选项。我想显示带有所选行内容的模式弹出窗口。现在,我正在工作的代码仅显示第一行,如果删除了模型目标,代码将显示正确的内容,但未以模态形式显示。请协助查询。

查看代码从这里开始

<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='Fetch/getDetails/{$row->id}' class='button-link border-0 color btn-edit' data-toggle='modal' data-target='#whatwedo'>Read More</a>";
        echo "</div>";
        echo "</div>";
        echo "</div>";


        // section for modal starts here
        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 "</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>";

        // section for modal starts here

        
    }
?>

控制器代码从这里开始

public function getDetails($id)
    {


        $row = $this-> db
                -> select('swo_brief_intro, swo_image_heading, swo_images')
                -> where('id', $id)
                -> limit(1)
                -> get('services_offered')
                -> row();
        
        if (isset($row))
        {

        echo "<div class='modal fade' id='exampleModal' tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true'>";
        echo "<div class='modal-dialog'>";
        echo "<div class='modal-content'>";
        echo "<div class='modal-header'>";
        echo "<h2 class='modal-title' id='exampleModalLabel'>$row->swo_image_heading</h2>";
        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 "<label>$row->swo_brief_intro</label>";
        echo "<br />";
        echo "<img src='".base_url().$row->swo_images."' class='img-fluid' alt='' style='height:250px; width:650px;'>";
        echo "</div>";
        echo "<br />";
        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>";
        }
            
    }

请协助查询。谢谢你

视图应该是这样的

但模态总是显示第一个内容

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:0)

您应该为每个模式或服务赋予模式不同的 ID,每个服务的 ID 必须是唯一的。

给按钮的id

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

并给模态也同样的id

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

您可以在数据库中使用服务 ID 或给它一个唯一的名称,确保按钮和模式具有相同的 ID。

顺便说一句,我已经在你的另一个question

上回答了这个问题
相关问题