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与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
浅析JavaScript中的变量提升
Jun 01 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 模拟POST|GET操作实现代码
2010/07/20 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
Javascript中string转date示例代码
2013/11/01 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
vuejs指令详解
2017/02/07 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
小程序云函数调用API接口的方法
2019/05/17 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
Python编写百度贴吧的简单爬虫
2015/04/02 Python
Python中自定义函数的教程
2015/04/27 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
python 负数取模运算实例
2020/06/03 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
PHP面试题及答案一
2012/06/18 面试题
C++程序员求职信范文
2014/04/14 职场文书
远程培训的心得体会
2014/09/01 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript