JS+CSS实现可拖动的弹出提示框
本文实例讲述了JS+CSS实现可拖动的弹出提示框。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>JS+CSS打造的可拖动的弹出提示框</title>
<styletype="text/css">
a{color:#000;font-size:12px;text-decoration:none}
a:hover{color:#900;text-decoration:underline}
body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366);overflow:hidden}
#massage_box{position:absolute;left:expression((body.clientWidth-350)/2);top:expression((body.clientHeight-200)/2);width:350px;height:200px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2);z-index:2;visibility:hidden}
#mask{position:absolute;top:0;left:0;width:expression(body.scrollWidth);height:expression(body.scrollHeight);background:#666;filter:ALPHA(opacity=60);z-index:1;visibility:hidden}
.massage{border:#036solid;border-width:1131;width:95%;height:95%;background:#fff;color:#036;font-size:12px;line-height:150%}
.header{background:#036;height:10%;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;padding:3505;color:#fff}
</style>
<!--实现层移动-->
<scriptlanguage="javascript">
varObj=''
document.onmouseup=MUp
document.onmousemove=MMove
functionMDown(Object){
Obj=Object.id
document.all(Obj).setCapture()
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}
functionMMove(){ if(Obj!=''){ document.all(Obj).style.left=event.x-pX; document.all(Obj).style.top=event.y-pY; } }
functionMUp(){ if(Obj!=''){ document.all(Obj).releaseCapture(); Obj=''; } } </script> </head><body> <divid="massage_box"><divclass="massage"> <divclass="header"onmousedown=MDown(massage_box)> <spanonClick="massage_box.style.visibility='hidden';mask.style.visibility='hidden'"style="float:right;display:inline;cursor:hand">×</span></div> </div></div> <divid="mask"></div> <spanonClick="mask.style.visibility='visible';massage_box.style.visibility='visible'"style="cursor:hand"><ahref="#"><fontsize=18px>点此提示</font></a></span> </body> </html>