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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
js处理表格对table进行修饰
May 26 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 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
海贼王:最美的悬赏令!
2020/03/02 日漫
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
js对象与打印对象分析比较
2013/04/23 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
详细分析Python垃圾回收机制
2020/07/01 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
公司开业庆典主持词
2014/03/21 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
公司市场部岗位职责
2015/04/15 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
Nginx实现负载均衡的项目实践
2022/03/18 Servers
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA