Question

我正在创建一个用户必须单击图像以在模态中查看它的表格，我按照Bootstrap open image in modal中的说明操作，因为我们有相同的情况，并且在JSFiddle上，他的代码工作正常，但对我来说，它不起作用，我的代码是这样的：

<div class="box">
                            <div class="box-header">
                                <h3 class="box-title">Products Table</h3>                                    
                            </div><!-- /.box-header -->
                            <div class="box-body table-responsive">
                                <table id="example1" class="table table-bordered table-striped">
                                    <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Brand Name</th>
                                    <th>Description</th>
                                    <th>Amount</th>
                                    <th>Stocks</th>
                                    <th>Expiry Date</th>
                                    <th>Image</th>
                                    <th>Action</th>
                                </tr>
                                    </thead>

                                    <tbody>
                                <?php
                                $query = mysql_query("select * from product,product_brand where product_brand.product_brand_id = product.product_brand_id") or die(mysql_error());
                                while ($row = mysql_fetch_array($query)) {
                                    $user_id = $row['product_id'];
                                    ?>
                                    <tr class="warning">
                                        <td><?php echo $row['product_name']; ?></td> 
                                        <td><?php echo $row['product_brand_name']; ?></td> 
                                        <td><?php echo $row['product_description']; ?></td> 
                                        <td><?php echo $row['product_price']; ?></td> 
                                        <td><?php echo $row['product_stock']; ?></td> 
                                        <td><?php echo   $row['product_exdate']; ?></td> 
                                        <td><a href="#" id="pop">
 <img id="imageresource" src="<?php echo $row['prod_image']; ?>" style="width: 400px; height: 264px;">
 Click to Enlarge  </a>

在图像上我决定放置模态，所以当它点击时，图像在模态中大，我也想隐藏图像，我该怎么做？现在，这个代码是模态和脚本，这是伤心地说，它似乎没有出现：

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"><i class="fa fa-plus"></i> View</h4>
                </div>



                    <div class="modal-body">

                        <img src="" id="imagepreview" style="width: 400px; height: 264px;" >


                    </div>
                    <div class="modal-footer clearfix">

                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Discard</button>


                    </div>

                    </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
 <script>
 $("#pop").on("click", function() {
 $('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
 $('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function <img src=""  id="imagepreview" style="width: 400px; height: 264px;" >
 });
  </script>

Bootstrap 3以模态打开图像？

0 个答案: