使用【 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" />

<!--引用jpuery——js代码包-->

<script src="../jquery-1.11.2.min.js"></script>

<!--引用bootstrap——js代码包-->

<script src="../bootstrap.min.js"></script>

<title>无标题文档</title>

<!--引用bootstrap——css代码包-->

<link href="../bootstrap.min.css" rel="stylesheet" type="text/css" />

</head>

<body>

<input type="button" value="显示" id="btn" />

<table width="100%" border="" cellpadding="" cellspacing="">

<tr id="sj">

<td>代码</td>

<td>名称</td>

<td>操作</td>

</tr>

<tbody id="tb"></tbody>

</table>

<div class="modal fade" id="myModal" tabimdex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-content">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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>

<script type="text/javascript">

$("#btn").click(function(){

    $.ajax({

        url:"caozuo_chuli.php",

        dataType:"TEXT",

        success: function(data){

            var hang = data.split("|");

            var str = "";

            for(var i=;i<hang.length;i++){

                var lie = hang[i].split("^");

                str = str+"<tr><td>"+lie[]+"</td><td>"+lie[]+"</td><td><span class='sc' bs'"+lie[]+"'>删除</span><button class='btn btn-primary btn-lg xq' data-toggle='modal' data-target='#myModal' bs='"+lie[]+"'>开始演示模态框</button></td></tr>";

                }

                $("#tb").html(str);

                //加事件

                $(".sc").click(function(){

                    alert("aa");

                    });

                //查看详情

                $(".xq").click(function(){

                    var code = $(this).attr("bs");

                    $.ajax({

                        url:"xiangqing_chuli.php",

                        data:{code:code},

                        type:"POST",

                        success: function(data){

                            var lie1 = data.split("^");

                            var str = "<div>民族代号:"+lie1[]+"</div><div>名族名称:"+lie1[]+"</div>";

                            $("#nr").html(str);

                            }

                        });

                    });

            }

        });

    });

</script>

</html>

使用ajax显示 小窗口 详情 页面    和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="../tanchuang.js"></script>

<title>无标题文档</title>

<link href="../tanchuang.css" rel="stylesheet" type="text/css" />

</head>

<body>

<input type="button" value="显示" id="btn" />

<table width="100%" border="" cellpadding="" cellspacing="">

<tr id="sj">

<td>代号</td>

<td>名称</td>

<td>操作</td>

</tr>

<tbody id="td"></tbody>

</table>

</body>

<script type="text/javascript">

$("#btn").click(function(){

    $.ajax({

        url:"caozuo_chuli.php",

        dataType:"TEXT",

        success:function(data){

            var hang = data.split("|");

            var str = "";

            for(var i=;i<hang.length;i++){

                var lie = hang[i].split("^");

                str = str+"<tr><td>"+lie[]+"</td><td>"+lie[]+"</td><td><span class='sc' bs='"+lie[]+"'>删除</span></td>&nbsp;&nbsp;<td><span class='xq' bs='"+lie[]+"'>查看详情</span></td></tr>";

                }

                $("#td").html(str);

                //加事件

                $(".sc").click(function(){

                    alert("aa");

                    });

                //查看详情

                $(".xq").click(function(){

                    var code = $(this).attr("bs");

                    $.ajax({

                        url:"xiangqing_chuli.php",

                        data:{code:code},

                        type:"POST",

                        success: function(data){

                            var lie1 = data.split("^");

                            var str = "<div>代号:"+lie1[]+"</div><div>代号:"+lie1[]+"</div>";

                            var btn = "<input type='button' value='确定' class='qd' />";

                            var tc = new Window({

                                tiyle:"详细信息",

                                content:str,

                                buttons:btn

                                });

                                $(".qd").click(function(){

                                    $(".zhuti").remove();

                                    $("#zz").remove();

                                    });

                            }

                        });

                    })

            }

        });

    });

</script>

</html>

操作处理页面

<?php

include("../DBDA.class.php");

$db = new DBDA();

$sql = "select * from nation";

echo $db->StrQuery($sql);

?>

详情处理页面

<?php

include("../DBDA.class.php");

$db = new DBDA();

$code = $_POST["code"];

$sql = "select * from nation where code='{$code}'";

echo $db->StrQuery($sql);

?>

使用bootstrap效果图

使用AJAX效果图

使用【 ajax 】【 bootstrap 】显示出小窗口 详情内容 一些代码意思可以参考下一个文章的更多相关文章

  1. JS设置弹出小窗口。

    经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这 ...

  2. layui 在页面弹出小窗口，并关闭

    function showdialog() { layer.open({  type: 2,  title: '发起调度', shadeClose: true, shade: 0.8, area: [ ...

  3. JS 弹出小窗口

    弹出窗口函数 function openwindow(url,name,iWidth,iHeight){ var url; //转向网页的地址; var name; //网页名称,可为空; var i ...

  4. 理解 UWP 视图的概念，让 UWP 应用显示多个窗口（多视图）

    原文 理解 UWP 视图的概念,让 UWP 应用显示多个窗口(多视图) UWP 应用多是一个窗口完成所有业务的,事实上我也推荐使用这种单一窗口的方式.不过,总有一些特别的情况下我们需要用到不止一个窗口 ...

  5. Eclipse的调试功能（转）（让Eclipse也能有VS的即时窗口那样的即时代码调试功能）

    前言:可以很明确的说明,eclipse也有像vs那样的即时窗口来运行即时代码的功能. 调试的界面如下: 如果要像vs那样的即时调试功能,需要做一些设置,就是Expressions功能. 开通步骤:Wi ...

  6. ***小程序wx.getUserInfo不能弹出授权窗口后的解决方案

    微信更新api后,wx.getUserInfo在开发和体验版本都不能弹出授权窗口.微信文档说明: 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type=& ...

  7. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  8. iOS开发小技巧--判断控件是否显示在当前窗口

    一.判断控件是否显示在当前窗口,需要同时满足一下条件: 控件的Hidden = NO; 控件的Alpha >= 0.01; self.window = keyWindow; 主窗口的bounds ...

  9. 【Bootstrap】优秀小插件收集

    Bootstrap中不乏很多优秀的小插件来让界面更加漂亮.比如之前做过笔记的bootstrap-fileinput,select2,datetimepicker等都是属于这一系列的.这些相对而言比较大 ...

随机推荐

  1. 原创:vsphere概念深入系列二：vSphere交换机命令行查看排错

    1.如何查看VM的IP Addresses, MAC Addresses, Uplink ports, Port ID,VSS/VDS,portgroup,DVPort Group,vmnic Upl ...

  2. Centos或Windows中部署Zookeeper集群及其简单用法

    一.简介 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件 ...

  3. 11G新特性 -- Multicolumn Statistics (Column groups)

    默认oracle会收集表中各个列的统计信息,但是会忽略列之间的关联关系.在大多情况下,优化器假设在复杂查询中的列之间是独立的.当where子句后指定了一个表的多个列条件时,优化器通常会将多个列的选择性 ...

  4. SNF开发平台WinForm-平板拍照及扫描二维码功能

    在我们做项目的时候,经常会有移动平板处理检验,审核等,方便移动办公.这时就需要在现场拍照上传问题,把当场问题进行上传,也有已经拍完照的图片或加工过的图片进行上传.还有在车间现场一体机,工控机 这种产物 ...

  5. Spark Scheduler内部原理剖析

    文章正文 通过文章“Spark 核心概念RDD”我们知道,Spark的核心是根据RDD来实现的,Spark Scheduler则为Spark核心实现的重要一环,其作用就是任务调度.Spark的任务调度 ...

  6. 详解nginx 配置多个tomcat共用80端口

    场景:项目1放在tomcat1中,项目2放在tomcat2中,两个tomcat放在同一台服务器上,需要共享80端口访问注意:这里和集群部署是不同的,集群部署是一个项目放在多个tomcat中.这里通过n ...

  7. struts2：多业务方法的处理（动态调用，DMI）

    struts2支持调用指定Action类中某一个业务方法.如果没有指定,则调用execute方法. 1. 第一种实现方式,通过URL叹号参数 1.1 创建Action类,带多个方法 package c ...

  8. 译: 2. RabbitMQ Spring AMQP 之 Work Queues

    在上一篇博文中,我们写了程序来发送和接受消息从一个队列中. 在这篇博文中我们将创建一个工作队列,用于在多个工作人员之间分配耗时的任务. Work Queues 工作队列(又称:任务队列)背后的主要思想 ...

  9. ③NuPlayer播放框架之类NuPlayer源码分析

    [时间:2016-10] [状态:Open] [关键词:android,nuplayer,开源播放器,播放框架] 0 引言 差不多一个月了,继续分析AOSP的播放框架的源码.这次我们需要深入分析的是N ...

  10. AI金融知识自学偏量化方向-前提1

    前提: 统计学习(统计分析)和机器学习之间的区别 金融公司采用机器学习技术及招募相关人才要求 第一个问题:  机器学习和统计学都是数据科学的一部分.机器学习中的学习一词表示算法依赖于一些数据(被用作训 ...