Hhjian 2014-05-31
文章来源:http://www.itnose.net/detail/6051815.html 更多文章:http://www.itnose.net/type/71.html
弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件。不多废话,直接开始吧!
不想看可以在这里直接下载源码xsPop.zip
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) { var defaults = {//默认值 title: "弹出窗口", //窗口标题 width: 500, heigth: 400, tag: this, //弹出需要加载的元素 close: "关闭", mainContent: "body"//容器,为了可以提交表单,不过submit会刷新页面... }; var options = $.extend(defaults, options); //以传参覆盖 this.each(function () { xsMain(options.title, options.width, options.heigth, options.tag, options.close, options.mainContent); //插件的主入口 }); };
3:利用xsMain函数添加元素,并绑定事件
这里有个处理,就是控制高度和宽度如果设置超过了屏幕高宽度,就会适应屏幕,这样防止弹出层过大不能操作。其他的就是普通的添加html,本人用的string相加
//根据传入数据,添加遮罩层,弹出提示框 function xsMain(title, width, height, tag, close, mainContent) { var divmask = "<div class=\"mask\"></div>"; $(mainContent).append(divmask); var xsPop1 = " <div id=\"xsPop\" class=\"PopUp\"> <div class=\"PopHead\" id=\"xsPopHead\">"; var xsPop2 = " <b>" + title + " </b><span id=\"xsColse\">" + close + "</span>"; var xsPop3 = " </div> <div class=\"PopMain\" id=\"xsPopMain\">"; var xsPop5 = "</div><span id=\"xytest\"></span> </div>"; var allHtml = 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了。
//关闭弹出层 function ClosePop(tag, mainContent) { $(mainContent).append(tag); //保存,不然第四步的 $("#xsPop").remove()会把tag清空掉 $(tag).hide(); $(".mask").remove(); $("#xsPop").remove(); }
5:拖拽效果
方法一:第一次找到的是利用元素的事件,但是很容易出现元素丢失问题,效果不太理想
//弹出层的拖拽(失败的方法,会出现对象丢失) //control 为拖拽的元素,tag为动作的元素,一般control在tag内 // function drag(control, tag) { // var isMove = false; // var abs_x = 0, abs_y = 0; // $(control).mousedown( // function (event) { // var top = $(tag).offset().top; // var left = $(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 // }); // } // return false; // }); // }
方法二,本人目前采用的方法,利用document的down和up,但是还要有些许问题,移动过快的问题,坐标有小小的跳动现象
我还发现一个问题,如果我手残把弹出层直接拖到了屏幕上方的内部,这时放手,呵呵,你永远也不能把它拖回来或点关闭了。我去看了下百度首页的弹出层,他们也有这样的现象,但是把窗口点放大缩小后弹出层会重新回到中心。我也试着这样做,但是我绑定onresize会出现不能向最下面移动,他们用的事件肯定不是onresize.所以我就直接判断鼠标位置不能小于0了。
//弹出层的拖拽 //control 为拖拽的元素,tag为动作的元素,一般control在tag内 function xsdrag(control, tag) { $(control).mousedown(function (e)//e鼠标事件 { var offset = $(this).offset(); //DIV在页面的位置 var x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离 var y = 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: solid solid solid solid; 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); } .PopHead b { float: left; display: block; color: #C0C0C0; font-family: System; font-size: medium; line-height: 30px; text-indent: 2em; } .PopHead span { 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 () { var options = { title: "my pop", width: 500, heigth: 400, close: "close", mainContent: "form" } $("#pop1").xsPop(options); }); });
8:源码下载
下载地址:xsPop.zip
好了差不多就这些了。本来还想做个边框拉动改变大小的,发现需要点时间,就先不做了。其实说实话,我觉得拖拽意义不大,边框控制大小意义也不大,因为我设置了溢出会出现滚动条。
还闲扯一下,昨晚梦到发现博客园大神在我周围,然后我就约他出来吃饭,看到后发现是个戴眼镜的年轻人,我说想跟着他去学东西,他就把我带到他们公司,里面就几个人,还比较乱。我的想法是周末去免费帮他做事顺便学东西,可是他们周末不上班... 后面就是一大段角色扮演,魔幻武侠情结,呵呵,反正我的梦一般情节比较完整,有时场面还比较宏大,其实做做梦也是不错的么!悲剧的做梦后,早上上班迟到了...