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源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 Javascript
JS实现九宫格拼图游戏
Jun 28 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
自己做矿石收音机
2021/03/02 无线电
深入了解php4(1)--回到未来
2006/10/09 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
php报错502badgateway解决方法
2019/10/11 PHP
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Python字节单位转换实例
2019/12/05 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
2014三八妇女节活动总结
2014/03/01 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年教研组工作总结
2014/11/26 职场文书
前台文员岗位职责
2015/02/04 职场文书
活动简报范文
2015/07/22 职场文书
特种设备安全管理制度
2015/08/06 职场文书
初中政治教学反思
2016/02/23 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
Go归并排序算法的实现方法
2022/04/06 Golang