javascript彈出拖曳視窗_javascript技巧-js教程-PHP中文網

javascript彈出拖曳視窗_javascript技巧

WBOY

發布： 2016-05-16 15:45:55

原創

1345 人瀏覽過

可以拖曳的彈出窗口，在很多網頁上都可以見到，非常的人性化，下面透過一段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&#63;true:false;//判断浏览器类型 
document.onmousedown = function(evnt)//当鼠标左键按下后执行此函数 
{ 
 var evnt=evnt&#63;evnt:event; 
 if(evnt.button == (document.all &#63; 1 : 0)) 
 { 
 mouseD = true;//mouseD为鼠标左键状态标志，为true时表示左键被按下 
 } 
} 
objDiv.onmousedown = function(evnt) 
{ 
 objDrag=this;//objDrag为拖动的对象 
 var evnt=evnt&#63;evnt:event; 
 if(evnt.button == (document.all&#63;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&#63;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彈出拖曳視窗的全部內容，希望對大家有幫助。