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.ajax)
Nov 19 Javascript
javascript 学习之旅 (2)
Feb 05 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
详解参数传递四种形式
Jul 21 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
dedecms中使用php语句指南
2014/11/13 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
说一说Python logging
2016/04/15 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
python定义类self用法实例解析
2020/01/22 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
澳洲的服装老品牌:SABA
2018/02/06 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
核心价值观演讲稿
2014/05/13 职场文书
大学迎新标语
2014/06/26 职场文书
会员活动策划方案
2014/08/19 职场文书
北京故宫导游词
2015/01/31 职场文书
2015年工会工作总结
2015/03/30 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
如何写通讯稿
2015/07/22 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
anaconda python3.8安装后降级
2021/06/11 Python
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android