-1
我有一個視圖,顯示來自數據庫的數據,當點擊時我的模態應該彈出,並會顯示視圖中顯示的內容的更大圖片,當我點擊圖像時沒有任何反應任何想法如何我可以使這項工作?codeigniter模式不工作
控制器:
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>₱ <?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>
向您的控制器顯示載入模態的位置。 – user4419336
我不認爲它的負載模態問題,如果是的話,它會返回返回致命錯誤 – devpro