标题
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); //
插件的主入口
});
};
添加遮罩层,弹出
提示框
function xsMain(title,width,height,tag,close,mainContent) {
var divmask = "
";
$(mainContent).append(divmask);
var xsPop1 = "
";
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); }); //绑定
关闭动作
}
这里要先把tag给容器，不然后面remove时会一起remove，第二次弹出就找不到tag了。
关闭弹出层
function ClosePop(tag,mainContent) {
$(mainContent).append(tag); //保存，不然第四步的 $("#xsPop").remove()会把tag清空掉
$(tag).hide();
$(".mask").remove();
$("#xsPop").remove();
}
方法一：第一次找到的是利用元素的事件，但是很容易出现元素丢失问题，效果不太理想
方法，会出现对象丢失）
//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了。
页面的位置
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里面有多加高度和宽度的一半
7：页面的使用
测试服务器控件可以提交表单
好了差不多就这些了。本来还想做个边框拉动改变大小的，发现需要点时间，就先不做了。其实说实话，我觉得拖拽意义不大，边框控制大小意义也不大，因为我设置了溢出会出现滚动条。
