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">&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:"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弹窗的更多相关文章

  1. ajax练习习题一弹窗查看

    显示页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. AJAX里使用的弹窗样式 tanchuang.js tanchuang.css

    tanchuang.js // 每个弹窗的标识 var x =0; var idzt = new Array(); var Window = function(config){ //ID不重复 idz ...

  3. 点击对应不同name的button,显示不同name的弹窗（弹窗功能）

    (通过html5方法自定义属性选择,因此会有兼容性,此方法可适用移动端) 将button的name,与弹窗的name设为变量,作为参数传递. Button的name可以是自定义name,HTML5自定 ...

  4. ListPopupWindow 列表弹窗 常见弹窗区别

    案例 private void showPopupWindow(final Context context, @NonNull View anchorView) { final String[] po ...

  5. Django-choices字段值对应关系（性别）-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07

    目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型 科普 Ajax 发送 GET.POST 请求的几种常见方式 用 Ajax 做一个小案例 准备工作 动手用 Aj ...

  6. Django中数据传输编码格式、ajax发送json数据、ajax发送文件、django序列化组件、ajax结合sweetalert做二次弹窗、批量增加数据

    前后端传输数据的编码格式(contentType) 提交post请求的两种方式: form表单 ajax请求 前后端传输数据的编码格式 urlencoded formdata(form表单里的) ja ...

  7. Android重构与设计之路，从整理提示弹窗（SmartAlertPop）开始

    封装一个独立弹窗Module,这里的弹窗包括普通的Dialog方式弹框和WindowManager方式弹窗.提供一种管理项目里面弹窗的方案,便于后期修改和维护. 首先描述一个在大项目中普遍存在的一个现 ...

  8. JSON讲解和“弹窗”

    json定义形式{key1:value1, key2:value2, key3:value3.....} 例: title>JSON讲解</title> <script src ...

  9. 引用POPUI来实现弹窗效果，且弹窗中的内容可以点击事件

    seajs.use(['../js/ui/dialog'],function(){ $('.center-button').bind('click',function(){ var $dlg = $. ...

随机推荐

  1. loj 1221(spfa判正环）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=25957 思路:由于路线为一个环,将路径上的权值改为c-p*d,那么 ...

  2. python 类访问控制

    访问限制 我们可以给一个实例绑定很多属性,如果有些属性不希望被外部访问到怎么办? Python对属性权限的控制是通过属性名来实现的,如果一个属性由双下划线开头(__),该属性就无法被外部访问.看例子: ...

  3. helpDB

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Da ...

  4. SU sufdmod2命令学习

  5. struts2总结四:Action与Form表单的交互

    struts2 Action获取表单数据的方式有三种:1.通过属性驱动的方式.2.模型驱动方式.3.使用多个model对象的属性. 1.通过属性驱动式 首先在jsp里面编写form表单的代码如下: & ...

  6. 水题 ZOJ 3869 Ace of Aces

    题目传送门 水题,找出出现次数最多的数字,若多个输出Nobody //#include <bits/stdc++.h> //using namespace std; #include &l ...

  7. BZOJ2310 : ParkII

    单路径最大和问题,设f[i][j][S]表示到达(i,j),轮廓线状态为S的最优解. S用4进制m+1位数表示,0表示无插头,1表示左括号,2表示右括号,3表示独立插头. 在DP之前先进行一次预处理, ...

  8. BZOJ4011: [HNOI2015]落忆枫音

    Description 「恒逸,你相信灵魂的存在吗?」 郭恒逸和姚枫茜漫步在枫音乡的街道上.望着漫天飞舞的红枫,枫茜突然问出 这样一个问题.  「相信吧.不然我们是什么,一团肉吗?要不是有灵魂……我们 ...

  9. C# DateTime 日期加1天 减一天 加一月 减一月 等方法（转）

    //今天 DateTime.Now.Date.ToShortDateString(); //昨天,就是今天的日期减一 DateTime.Now.AddDays(-1).ToShortDateStrin ...

  10. java利用JFreeChart实现各种数据统计图（柱形图，饼图，折线图）

    最近在做数据挖掘的课程设计,需要将数据分析的结果很直观的展现给用户,这就要用到数据统计图,要实现这个功能就需要几个第三方包了: 1.       jfreechart-1.0.13.jar 2.    ...