在Bootstrap模式中显示PHP数据 [英] Display PHP data in Bootstrap Modal

问题描述

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

I have a basic family tree website that has each person as follows:

<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'标签，它应该显示一个模式，其编码如下：

The extract.php is a basic php script that takes the id from the href tag and extracts that persons information from the database. Now the php script displays data in a plain manner (white backgroud and plain black text). If you look closely as at the '`href' tag it should display a modal which is coded as follows:

<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传递任何数据的唯一方法，我不知道这些数据。任何与此有关的帮助将不胜感激。

For now I have the values hard coded , but I want the data I extract from the php to be displayed inside this modal on the same page. I've gone through a few question and know that a modal is loaded as soon as the page is loaded but it is hidden and the only way to pass any data into it through Ajax and Javascript which I have no clue about. Any help with this will be greatly appreciated.

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

Note: This is not an academic project nor will I be uploading this on a server.

推荐答案

可以试试这个吗？

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

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模式中显示PHP数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！