当前位置: 代码迷 >> JavaScript >> JS弹出可以搬动的DIV
  详细解决方案

JS弹出可以搬动的DIV

热度:47   发布时间:2012-10-27 10:42:26.0
JS弹出可以移动的DIV

html代码如下:

<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%;">
<!-- DIV弹出状态行:标题、关闭按钮 -->
<div style="background:#666; height:5%; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:12px; padding:3 5 0 5; color:#fff"
onmousedown="drag(message_box);return false">
<span style="display:inline;width:150px;position:absolute;font-size:200%">标题项</span>
<span onClick="closeProc();" style="float:right;display:inline;cursor:hand;font-size:200%">×</span>
</div>
具体内容,可以是表格也可以是DIV
</div><!-- message -->
</div><!-- message_box -->
</body>
</html>
?

?

  相关解决方案