我还发现一个问题，如果我手残把弹出层直接拖到了屏幕上方的内部，这时放手，呵呵，你永远也不能把它拖回来或点关闭了。我去看了下百度首页的弹出层，他们也有这样的现象，但是把窗口点放大缩小后弹出层会重新回到中心。我也试着这样做，但是我绑定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：页面的使用
测试服务器控件可以提交表单
复制代码 代码如下: