JS弹出层的显示与隐藏示例代码


Posted in Javascript onDecember 27, 2013
<!--弹出层的显示与隐藏--> 
<script type="text/javascript"> 
//弹出层的显示 
//overlays:为遮罩层的ID 
//wins:弹出层窗体的ID 
//弹出层中用于拖动的ID 
function popDIV_show(overlays,wins,wins_title) { 
var oLays = documentgetElementById(overlays); 
var oWins = documentgetElementById(wins); 
var oWins_title = documentgetElementById(wins_title); 
var bDrag = false; 
var disX = disY = 0; 
var w = ""; 
var n = 1; 
if (n > 0) { 
oLaysstyledisplay = "block"; 
oWinsstyledisplay = "block"; 
oWins_titleonmousedown = function(event) { 
var event = event || windowevent; 
bDrag = true; 
disX = eventclientX - oWinsoffsetLeft; 
disY = eventclientY - oWinsoffsetTop; 
thissetCapture && thissetCapture(); 
return false 
}; 
documentonmousemove = function(event) { 
if (!bDrag) 
return; 
var event = event || windowevent; 
var iL = eventclientX - disX; 
var iT = eventclientY - disY; 
var maxL = documentdocumentElementclientWidth 
- oWinsoffsetWidth; 
var maxT = documentdocumentElementclientHeight 
- oWinsoffsetHeight; 
iL = iL < 0 ? 0 : iL; 
iL = iL > maxL ? maxL : iL; 
iT = iT < 0 ? 0 : iT; 
iT = iT > maxT ? maxT : iT; 
oWinsstylemarginTop = oWinsstylemarginLeft = 0; 
oWinsstyleleft = iL + "px"; 
oWinsstyletop = iT + "px"; 
return false; 
}; 
documentonmouseup = windowonblur = oWins_titleonlosecapture = function() { 
bDrag = false; 
oWins_titlereleaseCapture && oWins_titlereleaseCapture(); 
}; 
} 
} 
//弹出层的隐藏 
//overlays:为遮罩层的ID 
//wins:弹出层窗体的ID 
function popDIV_hidden(overlays,wins) { 
var oWins = documentgetElementById(wins); 
var oLays = documentgetElementById(overlays); 
oWinsstyledisplay = "none"; 
oLaysstyledisplay = "none"; 
} 
</script>
Javascript 相关文章推荐
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
document.getElementById介绍
Sep 13 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
基于JavaScript实现年月日三级联动
Jun 22 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 #Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 #Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 #Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 #Javascript
Java/JS获取flash高宽的具体方法
Dec 27 #Javascript
location.href用法总结(最主要的)
Dec 27 #Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 #Javascript
You might like
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
react 生命周期实例分析
2020/05/18 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
python多线程扫描端口示例
2014/01/16 Python
python中List的sort方法指南
2014/09/01 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
django用户登录验证的完整示例代码
2019/07/21 Python
Python @property原理解析和用法实例
2020/02/11 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
2013的个人自我评价
2013/12/26 职场文书
班级活动策划书
2014/02/06 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
高三毕业感言
2015/07/30 职场文书
关于 Python json中load和loads区别
2021/11/07 Python
关于MySQL中的 like操作符详情
2021/11/17 MySQL
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis