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 相关文章推荐
JavaScript 给汉字排序实例代码
Jun 28 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
用javascript制作qq注册动态页面
Apr 14 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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
php模板原理讲解
2013/11/13 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python 闭包的使用方法
2017/09/07 Python
NumPy中的维度Axis详解
2019/11/26 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
django rest framework 过滤时间操作
2020/07/12 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
生产部厂长职位说明书
2014/03/03 职场文书
捐款倡议书
2014/04/14 职场文书
机械系毕业生求职信
2014/05/28 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL