Js+css implement a Drag pop-up prompt box _javascript tips

The example in this article describes the JS+CSS implementation can be dragged pop-up balloon. Share to everyone for your reference. The implementation methods are as follows:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
&LT;TITLE&GT;JS+CSS-Drag pop-up tip box </title>
<style type= "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: #036 solid; border-width:1 1 3 1; width:95%; height:95%; background: #fff; color: #036; font-size:12px; Lin e-height:150%}
Header{background: #036; height:10% Font-family:verdana, Arial, Helvetica, Sans-serif; font-size:12px; padding:3 5 0 5; Color: #fff}
</style>
<!--realize Layer moving-->
<script language= "JavaScript" >
var obj= '
Document.onmouseup=mup
Document.onmousemove=mmove
function Mdown (Object) {
Obj=object.id
document.all (OBJ). SetCapture ()
Px=event.x-document.all (OBJ). Style.pixelleft;
Py=event.y-document.all (OBJ). Style.pixeltop;
}

function Mmove () {
if (obj!= ') {
document.all (OBJ). style.left=event.x-px;
document.all (OBJ). Style.top=event.y-py;
}
}

function MUp () {
if (obj!= ') {
document.all (OBJ). ReleaseCapture ();
Obj= ';
}
}
</script>
<div id= "Massage_box" ><div class= "Massage" >
<div class= "Header" Onmousedown=mdown (Massage_box) >
<span onclick= "massage_box.style.visibility= ' hidden"; mask.style.visibility= ' hidden ' "style=" float:right; Display:inline; Cursor:hand ">x</span></div>
</div></div>
<div id= "Mask" ></div>
<span onclick= ' mask.style.visibility= ' visible ' massage_box.style.visibility= ' visible ' style= ' Cursor:hand ' ><a href= "#" ><font size=18px> dot this hint </font></a></span>
</body>

I hope this article will help you with your JavaScript programming.