javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js弹出拖动窗口

javascript弹出拖动窗口

作者:愚蠢的神

在很多网页上可以看到,点击网页的某个地方能够弹出一个新窗口,并且可以在屏幕中随意拖动,通过此篇文章给大家介绍javascript弹出拖动窗口,有需要的朋友可以参考下

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://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弹出拖动窗口的全部内容,希望对大家有所帮助。

您可能感兴趣的文章:
阅读全文