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.validate使用攻略 第一部
Jul 01 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 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
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP 函数学习简单小结
2010/07/08 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
PHP加密解密类实例代码
2016/07/20 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
JavaScript 学习点滴记录
2009/04/24 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
js中的string.format函数代码
2020/08/11 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
唐山大地震的观后感
2015/06/05 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
八年级作文之友谊
2019/12/02 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python