在Bootstrap Modal中显示PHP数据 - Display PHP data in Bootstrap Modal

我有一个基本的家谱网站，每个人如下:

<a href="extract.php?id=John Dice" class="md-trigger" data-modal="modal-3" id ="Mohammed Ishaq Sharief">John Dice</a>

extract.php是一个基本的php脚本，它从href标签中获取id，并从数据库中提取该人员信息。现在，php脚本以普通的方式显示数据(白色背景和纯黑色文本)。如果你仔细观察' ' href'标签，它应该显示一个模态，编码如下:

<div class="md-modal md-effect-1" id="modal-3">
    <div class="md-content">
        <h3>Person Information</h3>
        <div>
            <ul>
                <li><strong>Name:</strong> John Dice.</li>
                <li><strong>DOB:</strong> 28th July 1995.</li>
                <li><strong>BirthPlace:</strong> Chicago.</li>
                <li><strong>Occupation:</strong> Student.</li>
                <li><strong>About:</strong> Information.</li>
                <li><strong>Contact:</strong> Contact stuff.</li>
            </ul>
            <button class="md-close">Close </button>
        </div>
    </div>
</div>

现在我有硬编码的值，但我希望从php中提取的数据显示在同一页面上的这个模态内。我已经经历了几个问题，知道一个模态加载，只要页面加载，但它是隐藏的，通过Ajax和Javascript传递任何数据到它的唯一方法，我没有线索。如有任何帮助，我将不胜感激。

注意:这不是一个学术项目，我也不会把这个上传到服务器上。

您可以通过为结果创建一个页面来分隔结果

result.php:

<!DOCTYPE html>
<html>
 <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Remote file for Bootstrap Modal</title>  
 </head>
 <body>
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title">Modal title</h4>
        </div>
            <!-- /modal-header -->
        <div class="modal-body">
              <?php 
                  ///fetch from DB
                  $id = $_GET['id']; //to test it works with php GET
               ?>
          <!--put the result from DB here--->
          <ul>
             <li><strong>Name:</strong><?php echo $id;?> John Dice.</li>
              <!--put the result from DB here--->
              <ul>
                 <li><strong>Name:</strong> John Dice.</li>
                 <li><strong>DOB:</strong> 28th July 1995.</li>
                 <li><strong>BirthPlace:</strong> Chicago.</li>
                 <li><strong>Occupation:</strong> Student.</li>
                 <li><strong>About:</strong> Information.</li>
               <li><strong>Contact:</strong> Contact stuff.</li>
             </ul>
        </div>
           <!-- /modal-body -->
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
           <!-- /modal-footer -->
 </body>
</html>

和你的Modal触发器

  <!DOCTYPE html>
  <html>
    <head>
      <link href="bootstrap.css" rel="stylesheet">
      <script src="jquery-1.10.2.min.js"></script>
      <script src="bootstrap.js"></script>
    </head>
     <a data-toggle="modal" class="btn btn-info" href="result.php?id=123" data-target="#myModal">Click me !</a>
 <!-- Modal -->
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
       <div class="modal-content">
       </div><!-- /.modal-content -->
   </div>
    <!-- /.modal-dialog -->
 </div>
 <!-- /.modal -->
    </body>
 </html>

你的问题太宽泛了，我不知道如何开始。但首先，你不能运行这个，如果你不上载服务器与php apache和mysql运行。

第二，如果你不知道如何使用php/mysql从服务器操作数据，我建议你从这里学习。

第三，如果你想学习ajax，和bootstrap，似乎是一个可搜索的使用每个人的朋友。

我建议你在ajax部分使用jquery因为没有jquery就无法使用bootstrap模态所以好好利用这个，比如

$('your-button').on('click', function() { 
   //send your .post request here similar to ajax request
   $.post('request.php', { id: 'the value of id that was clicked', function(data) {
       $('.modal-body').html(data);
       $('your modal selector').modal();
   });
});

在您的request.php中，对过滤传递的id(单击)进行查询，并为您已经编写的数据创建无序列表。'

希望有帮助

可以试试吗?

html:

<a class="ajax_modal" href="modal.php?data=ini datanya">Open Modal</a>

jQuery:

(function( $ ) {
  'use strict';
  $(document).on('click', '.modal-dismiss', function (e) {
    e.preventDefault();
    $.magnificPopup.close();
  });
  $('.ajax_modal').magnificPopup({
    type: 'ajax',
    modal: true
  });
}).apply( this, [ jQuery ]);

modal.php

<?php
$data = $_GET["data"];
?>
<div id="custom-content" class="modal-block modal-block-md">
  <section class="panel">
    <header class="panel-heading bg-primary"><h2 class="panel-title" style="color: #ffffff;"><span class="fa fa-info-circle fa-lg"></span>&nbsp;&nbsp;Modal Header</h2></header>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-12">
          Data diterima : '<strong><?php print $data; ?></strong>'
        </div>
      </div>
    </div>
    <footer class="panel-footer bg-default" style="padding: 10px;">
      <div class="row">
        <div class="col-md-12 text-right">
          <div class="col-xs-8" align="left"><strong>Modul information</strong></div>
          <div class="col-xs-4" align="right"><button type="button" class="btn btn-sm btn-primary modal-dismiss"><strong>Close</strong></button></div>
        </div>
      </div>
    </footer>
  </section>
</div>