tanchuang.js

// 每个弹窗的标识
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++; //标识增加 }

tanchuang.css

.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;
}

AJAX里使用的弹窗样式 tanchuang.js tanchuang.css的更多相关文章

  1. JS的全局变量无法给Ajax里的变量赋值

    前阶段遇到这么一个问题,在JS定义一个全局变量,JS方法里的其他地方都能使用,偏偏ajax里无法赋值,也不是无法赋值,但赋值总是慢一拍,具体的解决方案如下图所示:

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

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

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

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

  4. 11.11 开课二个月零七天(ajax和bootstrp做弹窗)

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

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

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

  6. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  7. 将Microsoft Ajax Minifier集成到VS2013对JS、CSS进行编译时压缩

    在网站发布中,一般要将js,css文件压缩减少体积,以减少在HTTP请求中的流量.将Microsoft Ajax Minifier集成到VS2013中就可以对JS.CSS进行编译时压缩. VS2013 ...

  8. 页面跳转后样式丢失js失效

    2 页面跳转后样式丢失js失效 问题描述: 用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了. 解决办法: 将当前页面需要用到的css以及js放在< ...

  9. 在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

随机推荐

  1. Android Studio 3.1 正式版

    欢迎大家推荐自己在Android开发过程中用的好用的工具.学习开发教程.用到设计素材.如果你觉得本站对你有用,你可以点击底部的分享按钮,把本站分享到社交网络让你的小伙伴和更多的人知道. 或者可以考虑捐 ...

  2. grid - 初识

    Grid有三个参数 目前介绍以下两种:grid.inline-grid <view class="grid"> <view class='grid-row'> ...

  3. O_DIRECT与O_SYNC区别(转)

    O_DIRECT和O_SYNC是系统调用open的flag参数.通过指定open的flag参数,以特定的文件描述符打开某一文件. 这两个flag会对写盘的性能有很大的影响,因此对这两个flag做一些详 ...

  4. Linux系统级日志系统

    linux日志系统,在不同的发行版本名字不同.本质一样都是对系统运行非正常状态的记录... rhel5.x    syslogrhel6.x    rsyslog service rsyslog st ...

  5. 正则匹配报文中的XML(HTML)标签,替换重新输出

    调用返回报文标签中的存在中划线“-”,不符合规范,需要统一进行转换,但不能替换标签内的内容,利用正则匹配重新输出 /** * 正则匹配报文中的xml标签,将其中的"-"转换为&qu ...

  6. Ubuntu11.04安装引导BURG

    时间:11-05-10    BURG是一个漂亮的引导程序,可以代替ubuntu默认的引导. ubuntu11.04安装方法如下: sudo add-apt-repository ppa:n-muen ...

  7. std::lower_bound 功能

    std::lower_bound default (1) template <class ForwardIterator, class T> ForwardIterator lower_b ...

  8. JSP 性能优化

    无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行 ...

  9. C# 使用NLog记录日志入门操作

    环境:win7 64位, VS2010 1.首先用VS2010创建命令行工程NLogDemo 2.在程序包管理器控制台中输入:Install-Package NLog -Version 4.4.12 ...

  10. idea git 使用

    第一部  测试  本地git 是否已经成功安装 centos 7 发行版默认已经安装 第二部: 测试 github 连接是否成功,需要输入用户密码 第三部:创建git项目管理两种方式 1. 菜单 VC ...