ajax+bootstrap做弹窗
建页面,引入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);
ajax+bootstrap做弹窗的更多相关文章
- 11月10日下午 ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情
1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- 11.11 开课二个月零七天(ajax和bootstrp做弹窗)
1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情
1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- vue+ajax+bootstrap+python实现增删改
http://www.cnblogs.com/xwwin/p/5816527.html script src= " http://code.jquery.com/jquery.min.js ...
- bootstrap做了一个表格
花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...
- Bootstrap做的HTML页面在本地IE打开正常,放到服务器上显示就不正常了
<meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Com ...
- 用bootstrap做一个背景可轮转的登录界面
用bootstrap做一个背景可轮转的登录界面 一.总结 一句话总结:用css3的动画的 @keyframes 规则,制作轮转图. 1.用bootstrap做一个背景可轮转的登录界面? a.动画部分用 ...
- .Net MVC&&datatables.js&&bootstrap做一个界面的CRUD有多简单
我们在项目开发中,做得最多的可能就是CRUD,那么我们如何在ASP.NET MVC中来做CRUD呢?如果说只是单纯实现功能,那自然是再简单不过了,可是我们要考虑如何来做得比较好维护比较好扩展,如何做得 ...
- DataTables ajax + bootstrap 分页/搜索/排序/常见问题
最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...
随机推荐
- GridView控件隐藏列
GridView隐藏列visible="false" 后你就无法取得这列的值了 下面是迄今为止最简洁的解决方法了. protected void GVList_RowDataBou ...
- NHibernate配置
因为NHibernate被设计为可以在许多不同环境下工作,所以它有很多配置参数.幸运的是,大部分都已经有默认值了. NHibernate.Test.dll包含了一个示例的配置文件app.config, ...
- Mac Pro 编译安装 PHP扩展 -- Swoole扩展
回顾下先前的安装笔记: PHP5不重新编译,如何安装自带的未安装过的扩展,如soap扩展? #下载 Swoole-1.8.10后,开始编译# cd /Users/jianbao/Downloads/s ...
- BZOJ3224——Tyvj 1728 普通平衡树
1.题目大意:数据结构题,是treap,全都是treap比较基本的操作 2.分析:没啥思考的 #include <cstdio> #include <cstdlib> #inc ...
- 小技巧-a标签去除蓝圈
可以看到,蓝色的边框破坏了页面的整体美感,很多时候我们都是不需要的.通过设置相应的css可以去除点击过后的蓝色边框. map area { outline: none; } 效果如图,点击过后厌人的蓝 ...
- 跟着百度学PHP[4]OOP面对对象编程-16-switch逻辑就语句
直接看案例.较为简单.不解释. <?php $chengji="; #先定义一个变量赋值一个数值 switch ($chengji) { && $chengji > ...
- PHP面试试题
1,用PHP打印出前一天的时间,格式是2006-5-10 22:21:21echo date("Y:m:d H:i:s",strtotime("-1 day") ...
- Linux system 函数的一些注意事项
在日常的代码编程中 , 我们可以利用system 函数去调用一些我们自己想调用的命令 , 并获取他的返回值. 函数的原型如下: int system(const char *command); 上一 ...
- py代码模糊工具
https://github.com/astrand/pyobfuscate 使用方法,调用下图文件即可,方法 python pyobfuscate.py your_code.py 即可输出在cmd ...
- n全排列输出和 n个数的组合(数字范围a~b)
n全排列输出: int WPermutation(int num, bool bRepeat) num表示num全排列 bRepeat标志是否产生重复元素的序列. int Permutation(in ...