您的位置:主页 > 学无止境 > JAVASCRIPT >

JAVASCRIPT Jquery 实现弹出层插件

2014-06-04作者:admin来源:未知次阅读

弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件。不多废话,直接开始吧!

不想看可以在这里直接下载源码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

凡本站注明“本站”或“投稿”的所有文章,版权均属于文昕宇博客或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。本站已授权使用的作品,应在授权范围内使用,并注明“来源:文昕宇博客”并附上链接。违反上述声明者,本站将追究其相关法律责任。

编辑:文昕宇 关键词:

网友评论

随机推荐

图文聚集

热门排行

最新文章