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 相关文章推荐
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
python logging类库使用例子
2014/11/22 Python
python获取远程图片大小和尺寸的方法
2015/03/26 Python
Python中django学习心得
2017/12/06 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python中正则表达式的用法总结
2019/02/22 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Python内存映射文件读写方式
2020/04/24 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
美国性感女装网站:bebe
2017/03/04 全球购物
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
色戒观后感
2015/06/12 职场文书
保姆聘用合同
2015/09/21 职场文书