.show,.hide{
position:absolute;
width:200px;
height:200px;
border:5px solid #ccc;
background-color:red;
font-size:14px;
font-weight:bold;
padding:5px;
text-align:center;
color:#a24;
}
.hide{
display:none;
}
#header{
width:80%;
height:8px;
background-color:#AAAAAA;
cursor:move;
float:left;
}
通过JS控制层绝对居中
var a = document.getElementById("c");
var header = document.getElementById("header");
var oClose = document.getElementById("close");
var bDrag = false;
var disX = disY = 0;
function show(){
var scrollTop = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
a.className = "show";
a.style.left=(document.documentElement.clientWidth/2-a.clientWidth/2)+"px";
a.style.top=(scrollTop+document.documentElement.clientHeight/2-a.clientHeight/2)+"px";
}
oClose.onclick = function ()
{
a.className = "hide";
};
oClose.onmousedown = function (event)
{
(event || window.event).cancelBubble = true;
};
header.onmousedown = function (event)
{
var event = event || window.event;
bDrag = true;
disX = event.clientX - a.offsetLeft;
disY = event.clientY - a.offsetTop;
this.setCapture && this.setCapture();
return false
};
document.onmousemove = function (event)
{
if (!bDrag) return;
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - a.offsetWidth;
var maxT = document.documentElement.clientHeight - a.offsetHeight;
iL = iL < 0 ? 0 : iL;
//iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
//iT = iT > maxT ? maxT : iT;
a.style.marginTop = a.style.marginLeft = 0;
a.style.left = iL + "px";
a.style.top = iT + "px";
return false
};
document.onmouseup = window.onblur = header.onlosecapture = function ()
{
bDrag = false;
header.releaseCapture && header.releaseCapture();
};