如何將圖像，標題和描述傳遞給Bootstrap Modal彈出窗口？

Question

我如何將圖像，標題和描述傳遞給引導模態？ 當一個圖像鏈接單擊帶有該圖像標題和描述的模式打開時。 我的代碼是：

<?php                     
$result = mysql_query("SELECT * FROM project");

           $file_path = 'admin1\projectimages/';


while($post=mysql_fetch_array($result)){    
$id=$post['id'];
$ptitle=$post['Title'];
$image=$post['Image'];
$des=$post ['Description'];

$src = $file_path . $post['Image'];
echo'<li class="col-md-4 col-sm-6"><a href="#modal" class="fa" data-toggle="modal"  data-placement="right"><h4 class="project_heading">'.$ptitle.'</h4></a>
                    <a href="#modal" class="fa ok " data-toggle="modal"  data-target="#modal" data-placement="right"><img src='.$src.' style="width:250px; border:1px solid red;"></a></li>';}
?>

模態代碼：

<div class=" modal fade bs-example-modal-lg"  role="dialog"  id="modal" aria-hidden="true" data-keyboard="true" data-backdrop="static" tabindex="-1">
    <a href="#modal" class="fa fa-times cls-pop" data-dismiss="modal" id="thanks" ></a>
    <div class="modal-dialog modal-lg clearfix">
      <div class="modal-content pop-up">
<h3 >Title</h3>
               <div class="clearfix">
            <div>
              <img src="   "   style="width:99%; border:1px solid red;">
              <p></p><p ></p>
<p></p></div>

        </div>


      </div>
    </div>
  </div>

Answer 1

您可以使用echo將數據從PHP傳遞到HTML。

所以在這里： <h3 >Title</h3>

您應該輸入： <h3><?PHP echo $ptitle; ?></h3> <h3><?PHP echo $ptitle; ?></h3>

較短的表示法是<?= $ptitle; ?> <?= $ptitle; ?>

只要1）您的HTML正常運行，以及2）填充變量，它就可以正常工作。

Answer 2

在標簽中設置圖片src

<li>
 <a href="#modal" class="fa open_model" data-toggle="modal"  data-placement="right"><h4 class="project_heading" data-imgsrc="'.$src.'" data-desc="'.$ptitle.'">'.$ptitle.'</h4>
</a>
<a href="#modal" class="fa ok open_model" data-toggle="modal"  data-target="#modal" data-placement="right" data-imgsrc="'.$src.'" data-desc="'.$ptitle.'">

在您的模型html中

<div class="modal-content pop-up">
 <h3>Title</h3>
 <div class="clearfix">
 <div>
  <img id="model_img" src="" style="width:99%; border:1px solid red;">
  <p></p><p ></p><p></p>
 </div>

當您單擊鏈接時，將圖像src和描述設置為js文件中的模型集

$(document).on("click", ".open_model", function () {
     var imgSrc = $(this).data('imgsrc');
     var desc = $(this).data('desc');
     $(".modal-content #model_img").attr('src',imgSrc);
});

如果設置得好，它將起作用