Question

我有一个基本的家谱网站，每个人都有以下内容：

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

extract.php是一个基本的PHP脚本，它从id标记中获取href并从数据库中提取该人员信息。现在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将任何数据传递给它的唯一方法，我对此一无所知。任何有关这方面的帮助将不胜感激。

注意：这不是学术项目，我也不会在服务器上上传。

Answer 1

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

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>

你的模态触发器

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

Answer 2

你的问题很广泛，我不知道如何开始。但首先，如果您不在运行php apache和mysql的服务器上上传，则无法运行此命令。

其次，如果你不知道如何使用php / mysql从服务器处理数据，我建议你从here学习它。

第三，如果你想学习ajax和bootstrap，似乎可以使用everybody's friend进行搜索。

我建议你使用jquery作为ajax部分，因为你不能在不包含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，并为您已编写的数据创建无序列表。\

希望有所帮助：）

Answer 3

可以尝试一下吗？

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>

希望得到这个帮助。

在Bootstrap Modal中显示PHP数据

3 个答案: