ajax普通弹窗；Bootstrp弹窗
1.普通弹窗
主页面：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../fzl/jquery-1.11.2.min.js"></script> //JQuery
<script src="../tanchuang/tanchuang.js"></script> //弹窗 js
<title>无标题文档</title>
<link href="../tanchuang/tanchuang.css" rel="stylesheet" type="text/css" /> //弹窗 css
</head>
<body>
<input type="button" id="ck" value="显示" />
<table width="80%" border="1">
<tr>
<td>代号</td>
<td>民族</td>
<td>操作</td>
<td>查看</td>
</tr>
<tbody id="tb"></tbody>
</table>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
//点击显示
$("#ck").click(function(){
$.ajax({
url:"ajax8cl.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></td><td><span class ='ck' bs='"+lie[0]+"'>查看详情</span></td></tr>";
}
$("#tb").html(str);
//删除
$(".sc").click(function(){
alert("aa");
})
//弹窗
$(".ck").click(function(){
var code =$(this).attr("bs");
$.ajax({
url:"ajax8ckcl.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>"; //核心内容
var btn1 = "<input type='button' value='确定' class='qd' />";
var tc = new Window({
title:"详细信息",
content:str,
buttons:btn1
});
$(".qd").click(function(){
$(".zhuti").remove(); //点击确定按钮,弹窗移除
$("#zz").remove(); //点击确定按钮,遮罩移除
})
}
});
})
}
});
})
});
</script>
点击显示处理页面：
<?php
include("../fzl/czy.class.php");
$db = new czy();
$sql = "select * from nation";
echo $db->strQuery($sql);
弹窗处理页面：
<?php
include("../fzl/czy.class.php");
$db = new czy();
$code = $_POST["code"];
$sql = "select * from nation where code = '{$code}'";
echo $db->strQuery($sql);
2.Bootstrp做弹窗：
<!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.min.js"></script>
<title>无标题文档</title>
<link href="../bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="button" value="显示" id="btn" />
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="sj">
<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>
<script type="text/javascript">
$("#btn").click(function(){
$.ajax({
url:"nationchuli.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:"xqchuli.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>
</html>
ajax普通弹窗；Bootstrp弹窗的更多相关文章
- ajax练习习题一弹窗查看
显示页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- AJAX里使用的弹窗样式 tanchuang.js tanchuang.css
tanchuang.js // 每个弹窗的标识 var x =0; var idzt = new Array(); var Window = function(config){ //ID不重复 idz ...
- 点击对应不同name的button,显示不同name的弹窗（弹窗功能）
(通过html5方法自定义属性选择,因此会有兼容性,此方法可适用移动端) 将button的name,与弹窗的name设为变量,作为参数传递. Button的name可以是自定义name,HTML5自定 ...
- ListPopupWindow 列表弹窗 常见弹窗区别
案例 private void showPopupWindow(final Context context, @NonNull View anchorView) { final String[] po ...
- Django-choices字段值对应关系（性别）-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07
目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型 科普 Ajax 发送 GET.POST 请求的几种常见方式 用 Ajax 做一个小案例 准备工作 动手用 Aj ...
- Django中数据传输编码格式、ajax发送json数据、ajax发送文件、django序列化组件、ajax结合sweetalert做二次弹窗、批量增加数据
前后端传输数据的编码格式(contentType) 提交post请求的两种方式: form表单 ajax请求 前后端传输数据的编码格式 urlencoded formdata(form表单里的) ja ...
- Android重构与设计之路，从整理提示弹窗（SmartAlertPop）开始
封装一个独立弹窗Module,这里的弹窗包括普通的Dialog方式弹框和WindowManager方式弹窗.提供一种管理项目里面弹窗的方案,便于后期修改和维护. 首先描述一个在大项目中普遍存在的一个现 ...
- JSON讲解和“弹窗”
json定义形式{key1:value1, key2:value2, key3:value3.....} 例: title>JSON讲解</title> <script src ...
- 引用POPUI来实现弹窗效果，且弹窗中的内容可以点击事件
seajs.use(['../js/ui/dialog'],function(){ $('.center-button').bind('click',function(){ var $dlg = $. ...
随机推荐
- 64位环境中使用SQL查询excel的方式解决
--64位环境中使用SQL查询excel的方式 环境: OS:Windows Server 2008 R2 Enterprise MSSQL:Microsoft SQL Server 2008 R2 ...
- jq查找父类元素三个函数的区别
parent是找当前元素的第一个父节点,parents是找当前元素的所有父节点 parent().parents()与closest()方法两两之间有类似又有不同,本篇简短的区分一下这三个方法.通过本 ...
- Android 用adb pull或push 拷贝手机文件到到电脑上，拷贝手机数据库到电脑上，拷贝电脑数据库到手机上
先说一下adb命令配置,如果遇到adb不是内部或外部命令,也不是可运行的程序或批量文件.配置下环境变量 1.adb不是内部或外部命令,也不是可运行的程序或批量文件. 解决办法:在我的电脑-属性-高级计 ...
- elk是指logstash,elasticsearch,kibana三件套，这三件套可以组成日志分析和监控工具
Logstash是一个完全开源的工具,他可以对你的日志进行收集.分析,并将其存储供以后使用(如,搜索),您可以使用它.说到搜索,logstash带有一个web界面,搜索和展示所有日志.kibana 也 ...
- python 类的初始化
虽然我们可以自由地给一个实例绑定各种属性,但是,现实世界中,一种类型的实例应该拥有相同名字的属性.例如,Person类应该在创建的时候就拥有 name.gender 和 birth 属性,怎么办? 在 ...
- Linux下压缩与解压命令tar
Linux下常见压缩文件的扩展名 *.gz:gzip压缩的: *.bz2:bzip2压缩的: *.tar:tar程序打包但没有压缩的: *.tar.gz:打包后并经过gzip压缩的: *.tar.bz ...
- BZOJ3939 : [Usaco2015 Feb]Cow Hopscotch
设f[i][j]表示到(i,j)的方案数,则有 $f[i][j]=\sum f[x][y](x<i,y<j,a[x][y]!=a[i][j])=\sum f[x][y](x<i,y& ...
- pygame系列_原创百度随心听音乐播放器_完整版
程序名:PyMusic 解释:pygame+music 之前发布了自己写的小程序:百度随心听音乐播放器的一些效果图 你可以去到这里再次看看效果: pygame系列_百度随心听_完美的UI设计 这个程序 ...
- Idea_从Eclipse转Intellij IDEA
场景:使用Intellij IDEA感觉还是不是很顺手,想放弃又舍不得它,如:强大的代码提示功能. 本人使用IntelliJ IDEA其实并不太久,用了这段时间以后,觉得的确很是好用.刚刚从Eclip ...
- 解决javax.imageio.IIOException: Can't create output stream!
解决javax.imageio.IIOException: Can't create output stream! javax.imageio.ImageIO.write(image, "J ...