javascript弹出拖动窗口

可以拖动的弹出窗口，在很多网页上都可以见到，非常的人性化，下面通过一段javascript代码就可以实现弹出拖动窗口，废话不多说了，直接贴代码了。

<！DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /><title>可以拖动的弹出窗口</title> <style type="text/css"> #popDiv {position:absolute;visibility:hidden;overflow:hidden;border:2px solid #AEBBCA;background-color:#EEF1F8;cursor:move;padding:1px; } #popTitle {background:#9DACBF;height:20px;line-height:20px;padding:1px; } #popForm {padding:2px; } .title_left {font-weight:bold;padding-left:5px;float:left; } .title_right {float:right; } #popTitle .title_right a {color:#000;text-decoration:none; } #popTitle .title_right a:hover {text-decoration:underline;color:#FF0000; } </style> <script> function showPopup（） //弹出层 {var objDiv=document.getElementById（"popDiv"）;objDiv.style.top="50px";//设置弹出层距离上边界的距离objDiv.style.left="200px";//设置弹出层距离左边界的距离objDiv.style.width="300px";//设置弹出层的宽度objDiv.style.height="200px";//设置弹出层的高度objDiv.style.visibility="visible"; } function hidePopup（）//关闭层 {var objDiv=document.getElementById（"popDiv"）;objDiv.style.visibility="hidden"; } </script> </head> <body> <div id="popDiv"><div id="popTitle"> <！-- 标题div --> <span class="title_left">修改操作</span><span class="title_right" onClick="hidePopup（）"><a href="#">关闭</a></span></div><div id="popForm"></div> </div> <input name="" type="button" onClick="showPopup（）" value="操作" /> <script type="text/javascript"> var objDiv=document.getElementById（"popDiv"）; var isIE=document.all?true:false;//判断浏览器类型 document.onmousedown = function（evnt）//当鼠标左键按下后执行此函数 {var evnt=evnt?evnt:event;if（evnt.button == （document.all ? 1 : 0））{mouseD = true;//mouseD为鼠标左键状态标志，为true时表示左键被按下} } objDiv.onmousedown = function（evnt） {objDrag=this;//objDrag为拖动的对象var evnt=evnt?evnt:event;if（evnt.button == （document.all?1 : 0））{mx=evnt.clientX;my=evnt.clientY;objDiv.style.left=objDiv.offsetLeft+"px";objDiv.style.top=objDiv.offsetTop+"px";if（isIE）{ objDiv.setCapture（）;}else{ window.captureEvents（Event.MOUSEMOVE）;}} } document.onmouseup=function（） {mouseD=false;objDrag="";if（isIE）{objDiv.releaseCapture（）;}else{window.releaseEvents（objDiv.MOUSEMOVE）;} } document.onmousemove=function（evnt） {var evnt=evnt?evnt:event;if（mouseD==true&&objDrag）{var mrx=evnt.clientX-mx;var mry=evnt.clientY-my;objDiv.style.left = parseInt（objDiv.style.left） + mrx + "px";objDiv.style.top = parseInt（objDiv.style.top） + mry + "px";mx = evnt.clientX;my = evnt.clientY;} } </script> </body> </html>

以上是本文实现javascript弹出拖动窗口的全部内容，希望对大家有所帮助。