代码点火器模式不工作

codeigniter modal not working

本文关键字：工作模式点火器代码更新时间：2023-09-26

我有一个显示数据库中数据的视图，单击时我的模态应该弹出，并显示视图中显示内容的更大图片，当我单击图像时没有任何反应任何想法我如何做到这一点？

控制器：

public function view_products() {
            $id = $this->uri->segment(3);
            $data['products'] = $this->user->viewprod($id);
            $this->load->view('product_viewpage', $data);
}

我的模型：

public function viewprod($id) {
$query = $this->db->query("SELECT * from product_table WHERE product_category = '$id'");
$r = $query->result();
return $r;
}

我的观点：

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Products</title>
        <!-- Bootstrap -->
        <link href='https://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
        <?php echo link_tag('css/Bootstrap.min.css')?>
        <?php echo link_tag('css/bootstrap-theme.min.css')?>
        <?php echo link_tag('css/STYLE01.css')?>
        <?php echo link_tag('css/NAVIGATION.css')?>
        <?php echo link_tag('assets/ICON.png')?>
        <style type="text/css">
            ::-webkit-scrollbar-thumb:vertical {
                background-color: #EF426F; /*color of main scrollbar*/
                height: 10px; /*height of scrollbar*/
            }
            ::-webkit-scrollbar {
                height: 0px;
                width: 4px; /*width of the slider*/
                background-color: #FFFFFF; /*color of the slider*/
            }
        </style>
    </head>
    <body>
   <center>
    <image src="<?php echo base_url() . 'assets/LOGO-(WHITE).png' ?> " width="890" height="220">
</center>
<div class="container_products">
    <div class="row">
        <center><br><br><br>
            <?php
            foreach ($products as $alls) {
               $id = $alls->product_id; 
$name = $alls->product_name; $description = $alls->product_description; 
$price = $alls->product_price; 
$picture = $alls->img_name. $alls->ext;
                ?>
       <div class="col-md-4"><a data-toggle="modal" data-target="#myModal">
                        <img class = "bread_img" id = "bread_img_<?php echo $id;?>" src="<?php echo base_url() . 'assets/' . $picture; ?>"  onMouseOut="this.src = '<?php echo base_url() . 'assets/' . $picture; ?>'" width="230" height="192"></a>
                        <input type ="hidden" id = "hidden_name_<?php echo $id;?>" value = "<?php echo $name;?>" >
                        <input type ="hidden" id = "hidden_desc_<?php echo $id;?>" value = "<?php echo $description;?>" >
                    <br><br> <h5 class="names" id="pname" src="<?php echo $name; ?>"><?php echo $name; ?></h5>₱&nbsp;<?php echo $price; ?>
                    <br><br><br><br><br>
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-l">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h4 class="modal-title" id="myModalLabel"> <?php echo $name; ?></h4>
                                </div>
                                <div class="modal-body">
                                    <img  src="<?php echo base_url() . 'assets/' . $picture; ?>" width="500" height="417" id = "modal_img">
                                    <br><br><h6 class="modal-title" id="myModalLabels"> <?php echo $description; ?></h6><br><br>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php } ?>   

    </div> 
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document.body).on('mouseover','.bread_img',function(){
    window.src_img = $(this).attr('src');   
    id = $(this).attr('id').replace('bread_img_','');
    window.name = $('#hidden_name_'+id).val();
     window.text = $('#hidden_desc_'+id).val();

   $('#myModalLabel').text(name);
   $('#myModalLabels').text(text);
    $(this).attr('src','assets/VIEW.png');

});

$(document.body).on('click','.bread_img', '.names',function(){
    $('#modal_img').attr('src',src_img);

});
</script>

请尝试此代码您忘记在控制器函数中加载模型

public function view_products() {

        $this->load->model('user');



        $id = $this->uri->segment(3);
        $data['products'] = $this->user->viewprod($id);
        $this->load->view('product_viewpage', $data);
}