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 相关文章推荐
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
详解关于Vue单元测试的几个坑
Apr 26 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
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
Python中的变量和作用域详解
2016/07/13 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
应届生.NET方向面试题
2015/05/23 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
农村婚礼证婚词
2014/01/10 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
民政局未婚证明
2015/06/15 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
详解Python中下划线的5种含义
2021/07/15 Python