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

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

我正在处理一个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>";
        }
            
    }

请协助查询,谢谢
景色会是这样的
但模态总是显示第一个内容

hrysbysz

hrysbysz1#

您应该为每个模态或服务给予不同的模态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'>";

你可以在你的数据库中使用servicesid或者给予它一个唯一的名字确保按钮和模态有相同的id。
顺便说一句,我已经回答了你的另一个问题

相关问题