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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
js 内存释放问题
Apr 25 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
JS Math对象与Math方法实例小结
Jul 05 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 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与MySQL交互使用详解
2006/10/09 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
动态加载iframe
2006/06/16 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
Python中生成器和yield语句的用法详解
2015/04/17 Python
说一说Python logging
2016/04/15 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
python日期相关操作实例小结
2019/06/24 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
护士自荐信
2013/10/25 职场文书
小学生期末评语
2014/04/21 职场文书
中秋晚会策划方案
2014/06/12 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
合同纠纷调解书
2015/05/20 职场文书
欠条格式范本
2015/07/03 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS