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 相关文章推荐
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
JavaScript组合继承详解
Nov 07 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
PHP获取MAC地址的函数代码
2011/09/11 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
js option删除代码集合
2008/11/12 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
Python定时执行之Timer用法示例
2015/05/27 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
基于pip install django失败时的解决方法
2018/06/12 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle