如何在轻量级引导模型中动态显示 php 表单的数据，同时单击它答案

【问题标题】：How to dynamically display php form's data in a lightweight bootstrap model while on click a on it如何在轻量级引导模型中动态显示 php 表单的数据，同时单击它
【发布时间】：2016-08-10 06:42:10
【问题描述】：

我有一个 PHP 和 HTML 代码，我从数据库中获取数据（文本和图像）。我很完美。现在我希望当我单击图像时，它应该在模型（引导灯箱）中打开，并提供更多详细信息。这是我的 PHP 代码：

<div class="row menu-container">
        <?php
            $categoryId = 1;
            $sql = "SELECT * FROM `products_table` where `cat_id` = '$categoryId' ORDER BY `id`  ";
            $result = mysql_query($sql) or die('couln not select query');
            $i=1;
            while($row= mysql_fetch_array($result)){
            $pro_id=$row['id'];         
        ?>
                <form id="form1<?=$pro_id?>" action ="#" method="post">
                            <div class="col-xs-12 col-sm-6 col-md-4 catBox <?php echo " ". 'right-side-border-'.$i;?> " >
                                <a href="#" class="mainCatName" style="border:none;"   data-featherlight="#my-model">
                                    <div id="imgProDetail" class="img-responsive imgProDetail" style="display:block;">
                                        <div class="proImg;">
                                            <img src="img/product/<?=$row['imgurl']?>" class="img-responsive cat-img;" style="margin:0 auto;" title="<?=$row['id']?>" >     
                                        </div>
                                        <div class="proName">
                                            <h3 style="text-align:center; border:none" class="sub-cat-name"><?=strtoupper($row['name'])?> </h3>
                                        </div>                               
                                    </div>
                                </a>                    
                            </div>                      
                </form>
            <?php $i++;?>
        <?php   }; ?>   
        </div>

下面是我的模型。

<style> .lightbox { display: none; } </style>

<div id="my-model" class="col-md-12 col-sm-12 col-xs-12 lightbox" width="500px" height="400px"  >
        <div class="col-md-6 col-sm-6 col-xs-12 pro_name">  product name goes here </div>
        <div class="col-md-6 col-sm-6 col-xs-12 pro_des"> Description here  </div>
        <div class="col-md-6 col-sm-6 col-xs-12 pro_price"> price goes here </div>
        <div class="col-md-6 col-sm-6 col-xs-12 pro_img"> Image goes here   </div>  
</div>

当我单击它时，我想在此模型中打开每个图像/数据的详细信息。例如，当我单击 image1 时，仅获取 image1 的详细信息并在此模式下显示它，以此类推。

【问题讨论】：

标签： javascript jquery popup bootstrap-modal lightbox

【解决方案1】：

您可以通过 diff 方法来实现这一点。其中之一是：

<a class="link" href="javascript:void(0)" custom_attr1="val1" custom_attr2="val2"><img src="....."/>

有两个自定义属性用于保存与图像关联的值。您可以根据需要使用任意数量。现在获取这些值并在弹出窗口中显示：

$('.link').click(function(){
   var val1 = $(this).attr('custom_attr1');
   var val2 = $(this).attr('custom_attr2');

   // now use it as per your requirement
});

【讨论】：