js弹出div并显示遮罩层


Posted in Javascript onFebruary 12, 2014
//--------------------弹出层------------------- 
//popDivId:弹出层div的ID 
//dragDivId:用于拖动div的ID 
//isShowMask:是否显示遮罩层 
function popDivShow(popDivId, dragDivId, isShowMask) { 
if (isShowMask) { 
creatMask(popDivId); 
} 
var oWins = document.getElementById(popDivId); 
var oWins_title = document.getElementById(dragDivId); 
var bDrag = false; 
var disX = disY = 0; 
oWins.style.display = "block"; 
oWins_title.onmousedown = function(event) { 
var event = event || window.event; 
bDrag = true; 
disX = event.clientX - oWins.offsetLeft; 
disY = event.clientY - oWins.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 - oWins.offsetWidth; 
var maxT = document.documentElement.clientHeight - oWins.offsetHeight; 
iL = iL < 0 ? 0 : iL; 
iL = iL > maxL ? maxL : iL; 
iT = iT < 0 ? 0 : iT; 
iT = iT > maxT ? maxT : iT; 
oWins.style.marginTop = oWins.style.marginLeft = 0; 
oWins.style.left = iL + "px"; 
oWins.style.top = iT + "px"; 
return false; 
}; 
document.onmouseup = window.onblur = oWins_title.onlosecapture = function() { 
bDrag = false; 
oWins_title.releaseCapture && oWins_title.releaseCapture(); 
}; 
} 
// 隐藏弹出层 
function popDivHidden(popDivId) { 
var oWins = document.getElementById(popDivId); 
oWins.style.display = "none"; 
window.parent.document.body.removeChild(window.parent.document.getElementById("maskDiv")); 
} 
// 获取弹出层的zIndex 
function getZindex(popDivId) { 
var popDiv = document.getElementById(popDivId); 
var popDivZindex = popDiv.style.zIndex; 
return popDivZindex; } 
// 创建遮罩层 
function creatMask(popDivId) { 
// 参数w为弹出页面的宽度,参数h为弹出页面的高度,参数s为弹出页面的路径 
var maskDiv = window.parent.document.createElement("div"); 
maskDiv.id = "maskDiv"; 
maskDiv.style.position = "fixed"; 
maskDiv.style.top = "0"; 
maskDiv.style.left = "0"; 
maskDiv.style.zIndex = getZindex(popDivId) - 1; 
maskDiv.style.backgroundColor = "#333"; 
maskDiv.style.filter = "alpha(opacity=70)"; 
maskDiv.style.opacity = "0.7"; 
maskDiv.style.width = "100%"; 
maskDiv.style.height = (window.parent.document.body.scrollHeight + 50) + "px"; 
window.parent.document.body.appendChild(maskDiv); 
maskDiv.onmousedown = function() { 
window.parent.document.body.removeChild(window.parent.document.getElementById("maskDiv")); 
}; 
}
Javascript 相关文章推荐
JavaScript 拖拉缩放效果
Dec 10 Javascript
Jquery性能优化详解
May 15 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 #Javascript
jquery实现网页查找功能示例分享
Feb 12 #Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 #Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 #Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 #Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 #Javascript
jquery ajax,ashx,json的用法总结
Feb 12 #Javascript
You might like
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
django 常用orm操作详解
2017/09/13 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Python笔记之facade模式
2019/11/20 Python
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
Order by的几种用法
2013/06/16 面试题
软件测试企业面试试卷
2016/07/13 面试题
建筑设计所实习生自我鉴定
2013/09/25 职场文书
单位实习证明怎么写
2014/01/17 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
婚庆主持词大全
2015/06/30 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android