html弹出居中显示,html 弹出div 居中 可移动

.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;

}

Title

Close

通过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();

};