将php值传递给bootstrap模式?

时间:2016-05-03 18:15:48

标签: php modal-dialog

我有一张照片列表。当你点击一张照片时,我想要出现一张带有同一张照片的模态。所以我想将摄影(foto或id_fotografia)的php值传递给模态。

聆听照片的代码是:

 <?php
 $query=mysqli_query($db,"select id_fotografia, foto, id_album from fotografias order by id_fotografia DESC limit 10");
 while($cat=mysqli_fetch_assoc($query)){?>
   <div class="col-md-6">
      <div class="portfolio-item">
        <a data-toggle="modal" data-target="#myModal" data-id="<?php echo $cat['id_fotografia']; ?>">
             <img class="img-portfolio img-responsive" src="<?php echo $cat['foto']; ?>"> 
         </a>
       </div>
     </div>
<?php } ?>

模态的代码是:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
    <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-body">
            <img src="//want the same photo appears here" class="img-responsive">
            </div>
        </div>
    </div>
</div>

感谢&#39; S

1 个答案:

答案 0 :(得分:0)

将您的a标记更改为。

<a data-toggle="modal" data-target="#myModal" data-img="<?php echo $cat['foto']; ?>">

您需要添加一些javascript。

$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget);
  var img = button.data('img');
  var modal = $(this);
  modal.find('img').attr('src', img);
})