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 Firefox3.5中操作select的问题
Jul 10 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 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
PHP下10件你也许并不了解的事情
2008/09/11 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
javascript的BOM
2016/05/03 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
原生js+canvas实现下雪效果
2020/08/02 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
详解python中的 is 操作符
2017/12/26 Python
python实现大文件分割与合并
2019/07/22 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
大专学生推荐信范文
2013/11/19 职场文书
情侣吵架检讨书
2014/02/05 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
初中地理教学反思
2016/02/19 职场文书
MySQL分区路径子分区再分区
2022/04/13 MySQL