Jquery 实现弹出层插件
弹出层的应用还是比较多的，登陆，一些同页面的操作，别人的总归是别人的，自己的才是自己的，所以一直以来想写个弹出层插件。不多废话，直接开始吧！
1：遮罩层
要弹出层，先要用一个遮罩层挡在下面的页面，此遮罩层是全屏的，页面滚动也要有，所以设置position:fixed;还要有透明效果，下面是我定义的遮罩层css,取名mask
.mask
{
position:fixed;
width:100%;
height:100%;
background-color:white;
overflow:scroll;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
z-index:20;
overflow:auto;
top:0px;
right:0px;
}
2：插件主要参数
tag：为什么需要tag？用tag可以指定需要弹出的隐藏元素，可以指定tag为选择器“#*”，这样可以弹出指定元素。这里我设置默认为this。
mainContent:这个参数是否需要？我觉得用处不大，我设置主要是为了对服务器控件，如果全部加在body，那就不能提交表单。但是submit点击后页面会刷新，弹出层消失，所以我觉得还是无用...
$.fn.xsPop=function(options){
vardefaults={//默认值
title:"弹出窗口",//窗口标题
width:500,
heigth:400,
tag:this,//弹出需要加载的元素
close:"关闭",
mainContent:"body"//容器,为了可以提交表单，不过submit会刷新页面...
};
varoptions=$.extend(defaults,options);//以传参覆盖
this.each(function(){
xsMain(options.title,options.width,options.heigth,options.tag,options.close,options.mainContent);//插件的主入口
});
};
3：利用xsMain函数添加元素，并绑定事件
这里有个处理，就是控制高度和宽度如果设置超过了屏幕高宽度，就会适应屏幕，这样防止弹出层过大不能操作。其他的就是普通的添加html，本人用的string相加
//根据传入数据,添加遮罩层,弹出提示框
functionxsMain(title,width,height,tag,close,mainContent){
vardivmask="<divclass=\"mask\"></div>";
$(mainContent).append(divmask);
varxsPop1="<divid=\"xsPop\"class=\"PopUp\"><divclass=\"PopHead\"id=\"xsPopHead\">";
varxsPop2="<b>"+title+"</b><spanid=\"xsColse\">"+close+"</span>";
varxsPop3=" </div> <divclass=\"PopMain\"id=\"xsPopMain\">";
varxsPop5="</div><spanid=\"xytest\"></span></div>";
varallHtml=xsPop1+xsPop2+xsPop3+xsPop5;
$(mainContent).append(allHtml);
$(tag).show();
$(tag).appendTo("#xsPopMain");
//得到浏览器的高度和宽度,进行后面判断(高度超过，拖动边框限制)
clientHeight=window.screen.height;
clientWidth=window.screen.width;
if(height>clientHeight){
height=clientHeight-100;
}
if(width>clientWidth){
width=clientWidth-100;
}
$("#xsPop").css({
"heigth":height+"px",
"width":width+"px",
"margin-top":"-"+(height/2)+"px",
"margin-left":"-"+(width/2)+"px"
});
$("#xsPopMain").css("height",height-$("#xsPopHead").height());
xsdrag("#xsPopHead","#xsPop");//绑定拖动动作
$("#xsColse").bind("click",function(){ClosePop(tag,mainContent);});//绑定关闭动作
}
4：关闭动作
这里要先把tag给容器，不然后面remove时会一起remove，第二次弹出就找不到tag了。
//关闭弹出层
functionClosePop(tag,mainContent){
$(mainContent).append(tag);//保存，不然第四步的$("#xsPop").remove()会把tag清空掉
$(tag).hide();
$(".mask").remove();
$("#xsPop").remove();
}
5：拖拽效果
方法一：第一次找到的是利用元素的事件，但是很容易出现元素丢失问题，效果不太理想
//弹出层的拖拽（失败的方法，会出现对象丢失）
//control为拖拽的元素，tag为动作的元素，一般control在tag内
// functiondrag(control,tag){
// varisMove=false;
// varabs_x=0,abs_y=0;
// $(control).mousedown(
// function(event){
// vartop=$(tag).offset().top;
// varleft=$(tag).offset().left;
// abs_x=event.pageX-left;
// abs_y=event.pageY-top;
// isMove=true;
// }).mouseleave(function(){
// isMove=false;
// });
// $(control).mouseup(function(){
// isMove=false;
// });
// $(document).mousemove(function(event){
// if(isMove){
// $(tag).css({
// 'left':event.pageX-abs_x+$(tag).width()/2-1,
// 'top':event.pageY-abs_y+$(tag).height()/2-1
// });
// }
// returnfalse;
// });
// }
方法二，本人目前采用的方法，利用document的down和up，但是还要有些许问题，移动过快的问题，坐标有小小的跳动现象
我还发现一个问题，如果我手残把弹出层直接拖到了屏幕上方的内部，这时放手，呵呵，你永远也不能把它拖回来或点关闭了。我去看了下百度首页的弹出层，他们也有这样的现象，但是把窗口点放大缩小后弹出层会重新回到中心。我也试着这样做，但是我绑定onresize会出现不能向最下面移动，他们用的事件肯定不是onresize.所以我就直接判断鼠标位置不能小于0了。
//弹出层的拖拽
//control为拖拽的元素，tag为动作的元素，一般control在tag内
functionxsdrag(control,tag){
$(control).mousedown(function(e)//e鼠标事件
{
varoffset=$(this).offset();//DIV在页面的位置
varx=e.pageX-offset.left;//获得鼠标指针离DIV元素左边界的距离
vary=e.pageY-offset.top;//获得鼠标指针离DIV元素上边界的距离
$(document).bind("mousemove",function(ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
{
if(ev.pageY<=0){return;}//防止边框超过屏幕后无法关闭和拖动
$(tag).css({
'left':ev.pageX-x+$(tag).width()/2,//本人的布局需要加这个
'top':ev.pageY-y+$(tag).height()/2
});
});
});
$(document).mouseup(function(){
$(this).unbind("mousemove");
});
}
6：样式表
弹出层的布局使用的是top和left+margin-top负值，所以我的js里面有多加高度和宽度的一半
.mask
{
position:fixed;
width:100%;
height:100%;
background-color:white;
overflow:scroll;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
z-index:20;
overflow:auto;
top:0px;
right:0px;
}
.PopUp
{
padding:0px;
position:absolute;
z-index:21!important;
background-color:White;
border-style:solidsolidsolidsolid;
border-width:1px;
border-color:#C0C0C0;
left:50%;
top:50%;
}
.PopHead
{
background-color:#F0F0F0;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#C0C0C0;
height:30px;
cursor:move;
clip:rect(0px,auto,auto,0px);
}
.PopHeadb
{
float:left;
display:block;
color:#C0C0C0;
font-family:System;
font-size:medium;
line-height:30px;
text-indent:2em;
}
.PopHeadspan
{
float:right;
display:block;
text-align:right;
line-height:30px;
cursor:pointer;
text-indent:5px;
color:#FF0000;
font-size:12pt;
}
.PopMain
{
padding:10px;
overflow:auto;
}
7：页面的使用
测试服务器控件可以提交表单
$(document).ready(function(){
$("#btnPop").click(function(){
varoptions={
title:"mypop",
width:500,
heigth:400,
close:"close",
mainContent:"form"
}
$("#pop1").xsPop(options);
});
});
好了差不多就这些了。本来还想做个边框拉动改变大小的，发现需要点时间，就先不做了。其实说实话，我觉得拖拽意义不大，边框控制大小意义也不大，因为我设置了溢出会出现滚动条。