<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div id="c" class="hide">
<div>
<div id="header">Title</div>
<div id="close" style="float:right;background-color:#FFFFFF;">Close</div>
</div>
通過JS控制層絕對居中
</div>
<div style="width:500px;height:1000px;background-color:#FFFFFF;"></div>
<div onclick="show();">點我</div>
<SCRIPT LANGUAGE="JavaScript">
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();
};
</SCRIPT>
</body>
</html>
html 彈出div 居中 可移動
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章