我有一个基本的家谱网站都有每个人如下:
<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这我不知道任何线索数据传递到它。 任何帮助,这将不胜感激。
注意:这不是一个学术项目,也将我在服务器上上传这个。
您可以通过对结果产生一个单独的页面的结果
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">×</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>
你的问题是广泛的,我不知道如何开头。 但首先,你不能,如果你不会用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
,这是单击,并为这是你已经写了数据的无序列表。\
希望能帮助到你 :)
可以试试这个?
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> 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>
希望这有助于。