JS弹出可拖拽可关闭的div层完整实例


Posted in Javascript onFebruary 13, 2015

本文实例讲述了JS弹出可拖拽可关闭的div层完整实现方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JS弹出可拖拽可关闭的div层</title>

<style>

html,body{height:100%;overflow:hidden;}

body,div,h2{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

center{padding-top:10px;}

button{cursor:pointer;}

#win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}

h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;}

h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}

</style>

<script>

window.onload = function ()

{

 var oWin = document.getElementById("win");

 var oBtn = document.getElementsByTagName("button")[0];

 var oClose = document.getElementById("close");

 var oH2 = oWin.getElementsByTagName("h2")[0];

 var bDrag = false;

 var disX = disY = 0;

 oBtn.onclick = function ()

 {

  oWin.style.display = "block" 

 };

 oClose.onclick = function ()

 {

  oWin.style.display = "none"

  

 };

 oClose.onmousedown = function (event)

 {

  (event || window.event).cancelBubble = true;

 };

 oH2.onmousedown = function (event)

 {  

  var event = event || window.event;

  bDrag = true;

  disX = event.clientX - oWin.offsetLeft;

  disY = event.clientY - oWin.offsetTop;  

  this.setCapture && this.setCapture();  

  return false

 };

 document.onmousemove = function (event)

 {

  if (!bDrag) return;

  var event = event || window.event;

  var iL = event.clientX - disX;

  var iT = event.clientY - disY;

  var maxL = document.documentElement.clientWidth - oWin.offsetWidth;

  var maxT = document.documentElement.clientHeight - oWin.offsetHeight;  

  iL = iL < 0 ? 0 : iL;

  iL = iL > maxL ? maxL : iL;   

  iT = iT < 0 ? 0 : iT;

  iT = iT > maxT ? maxT : iT;

  

  oWin.style.marginTop = oWin.style.marginLeft = 0;

  oWin.style.left = iL + "px";

  oWin.style.top = iT + "px";  

  return false

 };

 document.onmouseup = window.onblur = oH2.onlosecapture = function ()

 {

  bDrag = false;    

  oH2.releaseCapture && oH2.releaseCapture();

 };

};

</script>

</head>

<body>
<div id="win"><h2><span id="close">×</span></h2></div>

<center><button>弹出层</button></center>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
AngularJS表单编辑提交功能实例
Feb 13 #Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 #Javascript
jQuery动态修改超链接地址的方法
Feb 13 #Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 #Javascript
javascript获取元素离文档各边距离的方法
Feb 13 #Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 #Javascript
Js控制滑轮左右滑动实例
Feb 13 #Javascript
You might like
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
extjs form textfield的隐藏方法
2008/12/29 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
python中的插入排序的简单用法
2021/01/19 Python
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
我的求职计划书
2014/01/10 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
自荐信格式模板
2015/03/27 职场文书
2015年物资管理工作总结
2015/05/20 职场文书