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 相关文章推荐
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 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解析html的实现代码
2011/08/08 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
iOS10推送通知开发教程
2016/09/19 PHP
javascript window对象属性整理
2009/10/24 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
python获得一个月有多少天的方法
2015/06/04 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
增大python字体的方法步骤
2020/07/05 Python
python 爬虫请求模块requests详解
2020/12/04 Python
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
项目合作计划书
2014/01/09 职场文书
大专生自荐书范文
2014/06/22 职场文书
课外访万家心得体会
2014/09/03 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
redis连接被拒绝的解决方案
2021/04/12 Redis
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers