建页面，引入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">&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>

</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做弹窗的更多相关文章

  1. 11月10日下午 ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情

    1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  2. 11.11 开课二个月零七天（ajax和bootstrp做弹窗）

    1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  3. ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情

    1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  4. vue+ajax+bootstrap+python实现增删改

    http://www.cnblogs.com/xwwin/p/5816527.html script src= " http://code.jquery.com/jquery.min.js ...

  5. bootstrap做了一个表格

    花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...

  6. Bootstrap做的HTML页面在本地IE打开正常，放到服务器上显示就不正常了

    <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Com ...

  7. 用bootstrap做一个背景可轮转的登录界面

    用bootstrap做一个背景可轮转的登录界面 一.总结 一句话总结:用css3的动画的 @keyframes 规则,制作轮转图. 1.用bootstrap做一个背景可轮转的登录界面? a.动画部分用 ...

  8. .Net MVC&&datatables.js&&bootstrap做一个界面的CRUD有多简单

    我们在项目开发中,做得最多的可能就是CRUD,那么我们如何在ASP.NET MVC中来做CRUD呢?如果说只是单纯实现功能,那自然是再简单不过了,可是我们要考虑如何来做得比较好维护比较好扩展,如何做得 ...

  9. DataTables ajax + bootstrap 分页/搜索/排序/常见问题

    最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...

随机推荐

  1. lustre文件系统部署流程

    # 1 准备工作### 1.1 添加以太网址添加以太网地址,使得gio017可以访问到需要安装的节点.修改gio017上的/etc/hosts,将需要批量操作的节点名以如下方式添加.```[gio01 ...

  2. 【codevs1163】访问艺术馆

    题目描述 皮尔是一个出了名的盗画者,他经过数月的精心准备,打算到艺术馆盗画.艺术馆的结构,每条走廊要么分叉为二条走廊,要么通向一个展览室.皮尔知道每个展室里藏画的数量,并且他精确地测量了通过每条走廊的 ...

  3. struts2-(2)HelloWorld

    1.环境配置 1).进入http://struts.apache.org/download.cgi#struts23241 下载 struts官方源码 2).解压,进入apps/struts2-bla ...

  4. 优雅地使用Windows

    优雅地使用Windows 理财推荐:收益还行,安全性比余额宝高,只能自己的卡转进转出所以被盗也不怕,重要的是快速取现实时到账呢 1 现金宝 :点击进入现金宝 或者百度现金宝 2 百度理财 8.baid ...

  5. Android开发App工程结构搭建

    本文算是一篇漫谈,谈一谈关于android开发中工程初始化的时候如何在初期我们就能搭建一个好的架构.      关于android架构,因为手机的限制,目前我觉得也确实没什么大谈特谈的,但是从开发的角 ...

  6. 教你如何在Kali Linux 环境下设置蜜罐？

    导读 Pentbox是一个包含了许多可以使渗透测试工作变得简单流程化的工具的安全套件.它是用Ruby编写并且面向GNU/Linux,同时也支持Windows.MacOS和其它任何安装有Ruby的系统. ...

  7. 全栈工程师学习Linux技术的忠告

    随着科技的普及,Linux作为最受欢迎的服务端操作系统,无人不知,无人不晓.当今,不论是服务器搭建,还是客户端开发,Linux系统的基础技能对全栈来说都是必备的,而了解如下几个问题可以更好的帮助你成为 ...

  8. Leonbao：MapKit学习笔记

    以下仅作了解, 实际使用以百度地图居多, 因为百度地图有动态路径规划等接口 MapKit学习笔记    原帖: http://www.cocoachina.com/bbs/read.php?tid-6 ...

  9. IDEA 回滚SVN更新内容

  10. PHP网页缓存技术

    http://blog.sina.com.cn/s/blog_646e51c40100weu9.html 前台静态化:把动态页面解析后保存为静态页面 文件缓存:把查询结果保存为文件,XML 内存缓存: ...