Question

我如何将图像，标题和描述传递给bootstrap模式？当一个图像链接单击该模式打开时，该图像标题和描述。我的代码是：

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

较短的表示法是<?= $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);
});

如果你设置好它将起作用

如何将图像，标题和描述传递给Bootstrap Modal弹出窗口？

2 个答案: