JSON弹窗

<!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" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head>

<body>
<input type="button" id="btn" />
</body>
<script type="text/javascript">
$(document).ready(function(e) {

var a = {

code:"p001",
name:"张三",
shuzu:new Array(1,2,3,4),
json:{aa:"aa",bb:"bb"},
age:18

};

alert(a.json.bb);

//接口
//AJAX
//封装插件

});
</script>
</html>

// 每个弹窗的标识
var x =0;
var idzt = new Array();
var Window = function(config){

//ID不重复
idzt[x] = "zhuti"+x; //弹窗ID

//初始化，接收参数
this.config = {
width : config.width || 300, //宽度
height : config.height || 200, //高度
buttons : config.buttons || '', //默认无按钮
title : config.title || '标题', //标题
content : config.content || '内容', //内容
isMask : config.isMask == false?false:config.isMask || true, //是否遮罩
isDrag : config.isDrag == false?false:config.isDrag || true, //是否移动
};

//加载弹出窗口
var w = ($(window).width()-this.config.width)/2;
var h = ($(window).height()-this.config.height)/2;

var nr = "<div class='zhuti' id='"+idzt[x]+"' bs='"+x+"' style='width:"+this.config.width+"px; height:"+this.config.height+"px; background-color:white; left:"+w+"px; top:"+h+"px;'></div>";
$("body").append(nr);

//加载弹窗标题
var content ="<div id='title"+x+"' class='title' bs='"+x+"'>"+this.config.title+"<div id='close"+x+"' class='close' bs='"+x+"'>×</div></div>";
//加载弹窗内容
var nrh = this.config.height - 75;
content = content+"<div id='content"+x+"' bs='"+x+"' class='content' style='width:100%; height:"+nrh+"px;'>"+this.config.content+"</div>";
//加载按钮
content = content+"<div id='btnx"+x+"' bs='"+x+"' class='btnx'>"+this.config.buttons+"</div>";

//将标题、内容及按钮添加进窗口
$('#'+idzt[x]).html(content);

//创建遮罩层
if(this.config.isMask)
{
var zz = "<div id='zz'></div>";
$("body").append(zz);
$("#zz").css('display','block');
}

//最大最小限制，以免移动到页面外
var maxX = $(window).width()-this.config.width;
var maxY = $(window).height()-this.config.height;
var minX = 0,
minY = 0;

//窗口移动
if(this.config.isDrag)
{
//鼠标移动弹出窗
$(".title").bind("mousedown",function(e){

var n = this.getAttribute("bs"); //取标识

//使选中的到最上层
$(".zhuti").css("z-index",3);
$('#'+idzt[n]).css("z-index",4);

//取初始坐标
var endX = 0, //移动后X坐标
endY = 0, //移动后Y坐标
startX = parseInt($('#'+idzt[n]).css("left")), //弹出层的初始X坐标
startY = parseInt($('#'+idzt[n]).css("top")), //弹出层的初始Y坐标
downX = e.clientX, //鼠标按下时，鼠标的X坐标
downY = e.clientY; //鼠标按下时，鼠标的Y坐标

//绑定鼠标移动事件
$("body").bind("mousemove",function(es){

endX = es.clientX - downX + startX; //X坐标移动
endY = es.clientY - downY + startY; //Y坐标移动

//最大最小限制
if(endX > maxX)
{
endX = maxX;
} else if(endX < 0)
{
endX = 0;
}
if(endY > maxY)
{
endY = maxY;
} else if(endY < 0)
{
endY = 0;
}

$('#'+idzt[n]).css("top",endY+"px");
$('#'+idzt[n]).css("left",endX+"px");

window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty(); //取消选中文本

});
});
//鼠标按键抬起，释放移动事件
$("body").bind("mouseup",function(){

$("body").unbind("mousemove");

});
}

//关闭窗口
$(".close").click(function(){

var m = this.getAttribute("bs"); //找标识
$('#'+idzt[m]).remove(); //移除弹窗
$('#zz').remove(); //移除遮罩

})

x++; //标识增加

}

.zhuti
{
position:absolute;
z-index:3;
font-size:14px;
border-radius:5px;
box-shadow:0 0 5px white;
overflow:hidden;
color:#333;
}
.title
{
background-color:#3498db;
vertical-align:middle;
height:35px;
width:100%;
line-height:35px;
text-indent:1em;
}
.close{
float:right;
width:35px;
height:35px;
font-weight:bold;
line-height:35px;
vertical-align:middle;
color:white;
font-size:18px;
}
.close:hover
{
cursor:pointer;
}
.content
{
text-indent:1em;
padding-top:10px;
}
.btnx
{
height:30px;
width:100%;
text-indent:1em;
}
.btn
{
height:28px;
width:80px;
float:left;
margin-left:20px;
color:#333;
}
#zz
{
width:100%;
height:100%;
opacity:0.15;
display:none;
background-color:#ccc;
z-index:2;
position:absolute;
top:0px;
left:0px;
}

php第二十节课的更多相关文章

  1. centos LAMP第二部分apache配置 下载discuz！配置第一个虚拟主机 安装Discuz！ 用户认证 配置域名跳转 配置apache的访问日志 配置静态文件缓存 配置防盗链 访问控制 apache rewrite 配置开机启动apache tcpdump 第二十节课

    centos    LAMP第二部分apache配置  下载discuz!配置第一个虚拟主机 安装Discuz! 用户认证 配置域名跳转  配置apache的访问日志  配置静态文件缓存  配置防盗链 ...

  2. 风炫安全WEB安全学习第二十节课 反射型XSS讲解

    风炫安全WEB安全学习第二十节课 反射型XSS讲解 反射性xss演示 原理讲解 如果一个应用程序使用动态页面向用户显示错误消息,就会造成一种常见的XSS漏洞.通常,该页面会使用一个包含消息文本的参数, ...

  3. centos tomcat/resin安装配置 卸载系统自带的java tomcat安装配置 安装JDK resin安装配置 第二十八节课

    centos  tomcat/resin安装配置  卸载系统自带的java  tomcat安装配置  安装JDK   resin安装配置    第二十八节课 tomcat和java都不需要编译 tom ...

  4. centos LNMP第一部分环境搭建 LAMP LNMP安装先后顺序 php安装 安装nginx 编写nginx启动脚本 懒汉模式 mv /usr/php/{p.conf.default,p.conf} php运行方式SAPI介绍 第二十三节课

    centos  LNMP第一部分环境搭建 LAMP安装先后顺序  LNMP安装先后顺序 php安装 安装nginx  编写nginx启动脚本   懒汉模式  mv   /usr/local/php/{ ...

  5. centos shell编程6一些工作中实践脚本 nagios监控脚本 自定义zabbix脚本 mysql备份脚本 zabbix错误日志 直接送给bc做计算 gzip innobackupex/Xtrabackup 第四十节课

    centos   shell编程6一些工作中实践脚本   nagios监控脚本 自定义zabbix脚本 mysql备份脚本 zabbix错误日志  直接送给bc做计算  gzip  innobacku ...

  6. NeHe OpenGL教程 第二十九课：Blt函数

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  7. NeHe OpenGL教程 第二十八课：贝塞尔曲面

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  8. NeHe OpenGL教程 第二十六课：反射

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  9. NeHe OpenGL教程 第二十五课：变形

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

随机推荐

  1. apache ua Custom Log Formats

    RewriteEngine OnRewriteBase / RewriteCond %{HTTP_USER_AGENT} (android|bb\d+|meego).+mobile|avantgo|b ...

  2. MapReduce01

    ================== Hadoop内核 | MapReduce(分布式计算框架) ================== 源于Google的MapReduce论文 ----------& ...

  3. POI 读取word (word 2003 和 word 2007)（转，好用）

    POI 读取word (word 2003 和 word 2007)(转,好用) 转做的操作: 将作者文中失效的链接的正确链接放在失效链接的下面. 最近在给客户做系统的时候,用户提出需求,要能够导入 ...

  4. getElementByTagName的使用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. bzoj2982 combination——卢卡斯定理

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2982 卢卡斯定理裸题: 原准备1A来着,结果输出忘了加回车! 预处理阶乘或者现求都可以,感觉 ...

  6. E20170619-hm

    bucket   n. 水桶; open hash  [词典] [计] 开放散列,开混列; spirit   n. 精神,心灵; 情绪; 勇气; 精髓; flesh   n. 肉; 肉体; 果肉; 皮 ...

  7. 在vue项目npm run build后，index.html中引入css和js 报MIME type问题

    问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...

  8. linux 如何查看进程的执行时间

    ps  -ef|grep wo.php 得到 程序的pid 如 123 ps -p 123 -o etime

  9. c++小游戏

    #include <iostream> using namespace std; double shengmingli=2000;//定义主角初始生命力 int gongjili=150; ...

  10. Android：EditText属性大全

    一.inputType属性inputType属性在EditText输入值时启动的虚拟键盘的风格有着重要的作用.比如有时需要虚拟键盘只为字符或只为数字. <span style="fon ...