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 相关文章推荐
判断滚动条到底部的JS代码
Nov 04 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
vue之延时刷新实例
Nov 14 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
2006/12/23 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
pytyon 带有重复的全排列
2013/08/13 Python
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
使用Python读取大文件的方法
2018/02/11 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
基于Python的PIL库学习详解
2019/05/10 Python
python中对数据进行各种排序的方法
2019/07/02 Python
Python 转换文本编码实现解析
2019/08/27 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
Python分类测试代码实例汇总
2020/07/23 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
super关键字的用法
2012/04/10 面试题
现场施工员岗位职责
2014/03/10 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
父母教会我观后感
2015/06/17 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
PHP正则表达式之RCEService回溯
2022/04/11 PHP