JS弹出可以挪动的DIV
日期：2014-05-16 浏览次数：20355 次
<html>
<head>
<title>可拖动DIV</title>
<script type="text/javascript">
function showProc(){
message_box.style.visibility='visible';
//创建灰色背景层
procbg = document.createElement("div");?
procbg.setAttribute("id","mybg");?
procbg.style.background = "#000";?
procbg.style.width = "100%";?
procbg.style.height = "100%";?
procbg.style.position = "absolute";?
procbg.style.top = "0";?
procbg.style.left = "0";?
procbg.style.zIndex = "500";?
procbg.style.opacity = "0.3";?
procbg.style.filter = "Alpha(opacity=30)";?
//背景层加入页面
document.body.appendChild(procbg);
document.body.style.overflow = "hidden";
}
//拖动
function drag(obj){??
var s = obj.style;??
var b = document.body;???
var x = event.clientX + b.scrollLeft - s.pixelLeft;???
var y = event.clientY + b.scrollTop - s.pixelTop;?
var m = function(){??
if(event.button == 1){??
s.pixelLeft = event.clientX + b.scrollLeft - x;???
s.pixelTop = event.clientY + b.scrollTop - y;???
}else {
document.detachEvent("onmousemove", m);
}??
}??
document.attachEvent("onmousemove", m)??
if(!this.z)?
this.z = 999;???
s.zIndex = ++this.z;???
event.cancelBubble = true;???
}
function closeProc(){
message_box.style.visibility='hidden';
procbg.style.visibility = "hidden";
}
</script>
</head>
<body>
<input type="button" value="弹出可拖动DIV" onclick="showProc();" />?
<div id="message_box" style="position:absolute;
left:10%;top:10%;width:80%;height:80%;
filter:dropshadow(color=#666666,offx=3,offy=3,positive=2);
z-index:1000;
visibility:hidden">
<div id= "message" style="border:#036 solid; border-width:1 1 3 1;?
width:95%; height:95%;?
background:#fff; color:#036; font-size:12px; line-height:150%;">
