javascript弹出拖动窗口
可以拖动的弹出窗口,在很多网页上都可以见到,非常的人性化,下面通过一段javascript代码就可以实现弹出拖动窗口,废话不多说了,直接贴代码了。
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metaname="author"content="https://www.nhooo.com/"/> <title>可以拖动的弹出窗口</title> <styletype="text/css"> #popDiv { position:absolute; visibility:hidden; overflow:hidden; border:2pxsolid#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_righta { color:#000; text-decoration:none; } #popTitle.title_righta:hover { text-decoration:underline; color:#FF0000; } </style> <script> functionshowPopup()//弹出层 { varobjDiv=document.getElementById("popDiv"); objDiv.style.top="50px";//设置弹出层距离上边界的距离 objDiv.style.left="200px";//设置弹出层距离左边界的距离 objDiv.style.width="300px";//设置弹出层的宽度 objDiv.style.height="200px";//设置弹出层的高度 objDiv.style.visibility="visible"; } functionhidePopup()//关闭层 { varobjDiv=document.getElementById("popDiv"); objDiv.style.visibility="hidden"; } </script> </head> <body> <divid="popDiv"> <divid="popTitle"><!--标题div--> <spanclass="title_left">修改操作</span> <spanclass="title_right"onClick="hidePopup()"><ahref="#">关闭</a></span> </div> <divid="popForm"></div> </div> <inputname=""type="button"onClick="showPopup()"value="操作"/> <scripttype="text/javascript"> varobjDiv=document.getElementById("popDiv"); varisIE=document.all?true:false;//判断浏览器类型 document.onmousedown=function(evnt)//当鼠标左键按下后执行此函数 { varevnt=evnt?evnt:event; if(evnt.button==(document.all?1:0)) { mouseD=true;//mouseD为鼠标左键状态标志,为true时表示左键被按下 } } objDiv.onmousedown=function(evnt) { objDrag=this;//objDrag为拖动的对象 varevnt=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) { varevnt=evnt?evnt:event; if(mouseD==true&&objDrag) { varmrx=evnt.clientX-mx; varmry=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弹出拖动窗口的全部内容,希望对大家有所帮助。