可以拖動的彈出窗口，在很多網(wǎng)頁上都可以見到，非常的人性化，下面通過一段javascript代碼就可以實(shí)現(xiàn)彈出拖動窗口，廢話不多說了，直接貼代碼了。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://m.survivalescaperooms.com/" /><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";//設(shè)置彈出層距離上邊界的距離 objDiv.style.left="200px";//設(shè)置彈出層距離左邊界的距離 objDiv.style.width="300px";//設(shè)置彈出層的寬度 objDiv.style.height="200px";//設(shè)置彈出層的高度 objDiv.style.visibility="visible"; } function hidePopup()//關(guān)閉層 { var objDiv=document.getElementById("popDiv"); objDiv.style.visibility="hidden"; } </script> </head> <body> <div id="popDiv"> <div id="popTitle"> <!-- 標(biāo)題div --> <span class="title_left">修改操作</span> <span class="title_right" onClick="hidePopup()"><a href="#">關(guān)閉</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)//當(dāng)鼠標(biāo)左鍵按下后執(zhí)行此函數(shù) { var evnt=evnt?evnt:event; if(evnt.button == (document.all ? 1 : 0)) { mouseD = true;//mouseD為鼠標(biāo)左鍵狀態(tài)標(biāo)志，為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>以上是本文實(shí)現(xiàn)javascript彈出拖動窗口的全部內(nèi)容，希望對大家有所幫助。
新聞熱點(diǎn)
疑難解答
