How to dynamically display php form's data in a lightweight bootstrap model while on click a on it

Question

I have a PHP and HTML CODE where I am getting data (text and images) from database. I am perfect with it. Now I want that when I click on the image it should be open in a model (bootstrap lightbox) with further details. Here is my PHP CODE:

<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>

And below is my Model.

<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>

I want to open every image/data's detail here in this model when i click on it. for example when i click image1 then get the detail of only image1 and display it on this mode and so on for the otheres.

score 0 · Answer 1 · answered Aug 10 '16 at 06:50

You can achieve this by diff methods. One of them is:

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

There are two custom attributes are used to hold the values associated with image. You can use as many as required. Now get these values and show on popup like:

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

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

How to dynamically display php form's data in a lightweight bootstrap model while on click a on it

1 Answers1