使用【 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. Java 8 新特性——Lambdas 表达式

    本文内容 引入 测试数据 collect(toList()) map filter flatMap max 和 min reduce 整合操作 参考资料 Java 8 对核心类库的改进主要包括集合类的 ...

  2. redhat7.0配置网卡

    1.切换到网卡配置目录: cd /etc/sysconfig/network-scripts 2.编辑网卡信息 如 vim ifcfg-enpos3 TYPE=Ethernet #设备类型 BOOTP ...

  3. goaccess生成nginx每日访问纪录

    使用php写的,方便点 <?php // 定义全局参数 $date = date("Ymd"); $day = date("d", strtotime(' ...

  4. Nginx 访问日志配置

    一.Nginx 访问日志介绍 Nginx 软件会把每个用户访问网站的日志信息记录到指定的日志文件里,供网站提供者分析用户的浏览行为等,此功能由 ngx_http_log_module 模块负责. 二. ...

  5. MUI中等待框的H5实现

    MUI没有内置的那个弹出转圈圈的那个等待框,那个nativeui.showwaiting是只能用于app中的,不能用在H5网页中的,网上找了下,找到个别人已经写好的,自己 测试了下没问题,先记下来 @ ...

  6. 2. RabbitMQ 服务器 之下载安装

    RabbitMQ服务器如何安装? RabbitMQ是一个AMQP(Advanced Message Queue,即高级消息队列协议)服务器 . 下载地址: RabbitMQ下载 安装说明:各平台下Ra ...

  7. linux下zip包处理

    先来看例子: zip命令可以用来将文件压缩成为常用的zip格式.unzip命令则用来解压缩zip文件. 1. 我想把一个文件abc.txt和一个目录dir1压缩成为yasuo.zip: # zip - ...

  8. vue中使用localstorage

    1.store.js(读取写入到localstorage) const STORAGE_KEY="todos-vuejs" export default{ fetch(){ ret ...

  9. mxnet:背景介绍

    学习的过程 使用mxnet作为教程的深度学习库,重点介绍高层抽象包gluon 双轨学习法,既教授大家从零实现,也教授大家使用gluon实现模型:前者为了理解深度学习的底层设计,后者将大家从繁琐的模型设 ...

  10. 【九天教您南方cass 9.1】 10 DTM土方计算的四种方法

    同学们大家好,欢迎收看由老王测量上班记出品的cass9.1视频课程 我是本节课主讲老师九天. 我们讲课的教程附件也是共享的,请注意索取测量空间中. [点击索取cass教程]5元立得 (给客服说暗号:“ ...