javascript彈出拖動窗口

更新時間：2015年08月11日 09:40:39 作者：愚蠢的神

在很多網(wǎng)頁上可以看到，點擊網(wǎng)頁的某個地方能夠彈出一個新窗口，并且可以在屏幕中隨意拖動，通過此篇文章給大家介紹javascript彈出拖動窗口，有需要的朋友可以參考下

可以拖動的彈出窗口，在很多網(wǎng)頁上都可以見到，非常的人性化，下面通過一段javascript代碼就可以實現(xiàn)彈出拖動窗口，廢話不多說了，直接貼代碼了。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://m.fzitv.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)//當鼠標左鍵按下后執(zhí)行此函數(shù) 
{ 
 var evnt=evnt?evnt:event; 
 if(evnt.button == (document.all ? 1 : 0)) 
 { 
 mouseD = true;//mouseD為鼠標左鍵狀態(tài)標志，為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>

以上是本文實現(xiàn)javascript彈出拖動窗口的全部內容，希望對大家有所幫助。

您可能感興趣的文章: