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 相关文章推荐
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
Javascript 继承机制的实现
Aug 12 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 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使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python监控进程脚本
2018/04/12 Python
对python sklearn one-hot编码详解
2018/07/10 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
python滑块验证码的破解实现
2019/11/10 Python
python已协程方式处理任务实现过程
2019/12/27 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
python tqdm库的使用
2020/11/30 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
师范学院毕业生求职信范文
2013/12/26 职场文书
好人好事事迹材料
2014/02/12 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
认购协议书范本
2014/04/22 职场文书
司法所长先进事迹
2014/06/02 职场文书
酒店端午节活动方案
2014/08/26 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
高质量“欢迎词”
2019/04/03 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
基于Python实现对比Exce的工具
2022/04/07 Python
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers