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实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
vue中实现高德定位功能
Dec 03 Javascript
Vue插件之滑动验证码用法详解
Apr 05 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
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
学习php中的正则表达式
2014/08/17 PHP
php表单处理操作
2017/11/16 PHP
Js切换功能的简单方法
2010/11/23 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
int在python中的含义以及用法
2019/06/27 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
应届生幼儿园求职信
2013/11/12 职场文书
个人授权委托书模板
2014/09/14 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
交警失职检讨书
2015/01/26 职场文书