文档介绍:Jquery实现弹出层插件
这篇文章主要介绍了 Jquery实现弹出层插件,包括遮罩层、插件参数、关闭动作、拖拽效果 等,需要的朋友可以参考下
弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是 自己的,所idth -100;
)
$("#xsPop").css((
"heigth": height+ ,,px",
"width": width + "px",
"margin-top":+ (height /2) + "px",
"margin-left1':+ (width/2) + "px"
});
$("#xsPopMain").css("height", height - $("#xsPopHeacT).height。);
xsdrag("#xsRopHead"z "#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:拖拽效果
方法一:第一次找到的是利用元素的事件,但是很容易出现元素丢失问题,效果不太理想
复制代码代码如下:
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 = - left; abs_y = - top; isMove = true;)).mouseleave(function () { isMove = false;
//control为拖拽的元素,tag为动作的元素,一般control在tag内
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
});
$(control).mouseup(function () ( isMove = false;
});
$(document).mousemove(function (event) ( if (isMove) {
$(tag).css({
left:': - abs_x + $(tag).wi