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); }); });
好了差不多就这些了。本来还想做个边框拉动改变大小的,发现需要点时间,就先不做了。其实说实话,我觉得拖拽意义不大,边框控制大小意义也不大,因为我设置了溢出会出现滚动条。