javascript弹出拖动窗口


Posted in Javascript onAugust 11, 2015

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://3water.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";//设置弹出层距离上边界的距离 
 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弹出拖动窗口的全部内容,希望对大家有所帮助。

Javascript 相关文章推荐
js中关于String对象的replace使用详解
May 24 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
vue 粒子特效的示例代码
Sep 19 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 #Javascript
javascript实现五星评价代码(源码下载)
Aug 11 #Javascript
jQuery的remove()方法使用详解
Aug 11 #Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 #Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 #Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 #Javascript
jquery实现滑动特效代码
Aug 10 #Javascript
You might like
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
shell程序中如何注释
2012/01/28 面试题
学生实习自我鉴定
2013/10/11 职场文书
商业活动邀请函
2014/02/04 职场文书
合作协议书范本
2014/04/17 职场文书
2014年招生工作总结
2014/11/26 职场文书
赤壁观后感(2)
2015/06/15 职场文书
简爱读书笔记
2015/06/26 职场文书
小学体育组工作总结
2015/08/13 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
Golang实现可重入锁的示例代码
2022/05/25 Golang