在引导模态显示PHP数据(Display PHP data in Bootstrap Modal)

2019-10-20 10:10发布

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

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

extract.php是一个基本的PHP脚本,需要的idhref标记并从该数据库中人员的信息。 现在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的服务器处理数据,我建议你从了解它在这里 。

第三,如果你想了解Ajax和引导,似乎是一个可搜索的使用大家的朋友 。

我建议你使用jquery的ajax的一部分,因为你不能使用自举模式没有jQuery的包含,所以占据了优势,以一个样,

$('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>

希望这有助于。



文章来源: Display PHP data in Bootstrap Modal