建页面，引入bootstrap弹窗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery-1.11.2.min.js"></script> <script src="../bootstrap/dist/js/bootstrap.min.js"></script> <title>无标题文档</title> <link href="../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> </head> <body> <input type="button" value="查看" id="ck" /> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>代号</td> <td>名称</td> <td>操作</td> </tr> <tbody id="tb"></tbody> </table> <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 class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">详细信息</h4> </div> <div class="modal-body" id="nr">在这里添加一些文本</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">确定</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </body> </html>
运用ajax进行页面处理：
<script type="text/javascript"> $("#ck").click(function() { $.ajax({ url:"1cl.php", dataType:"TEXT", success: function(data){ var hang = data.split("|"); var str = ""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str = str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><span class='sc' bs='"+lie[0]+"'>删除</span>
<button class='btn btn-primary btn-lg xq' data-toggle='modal' data-target='#myModal' bs='"+lie[0]+"'>开始演示模态框</button></td></tr>"; } $("#tb").html(str); $(".sc").click(function(){ alert("aa"); }) $(".xq").click(function() { var code = $(this).attr("bs"); $.ajax({ url:"11cl.php", data:{code:code}, type:"POST", dataType:"TEXT", success: function(data){ var lie1 = data.split("^"); var str ="<div>民族代号："+lie1[0]+"</div><div>民族名称:"+lie1[1]+"</div>"; $("#nr").html(str); } }) }); } }) }); </script>
建处理界面1：
<?php include("../fengzhuang.class.php"); $db = new fengzhuang(); $sql = "select * from nation"; echo $db->strquery($sql);
建处理界面2：
<?php include("../fengzhuang.class.php"); $db = new fengzhuang(); $code = $_POST["code"]; $sql = "select * from nation where code='{$code}'"; echo $db->strquery($sql);