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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
javascript的理解及经典案例分析
May 20 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 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中相同前缀的数据表的代码
2011/07/01 PHP
php防止sql注入代码实例
2013/12/18 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
模仿jQuery each函数的链式调用
2009/07/22 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python 文件管理实例详解
2015/11/10 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
在Python中表示一个对象的方法
2019/06/25 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
Ajax的工作原理
2015/12/04 面试题
物流经理自我评价
2013/09/23 职场文书
材料采购员岗位职责
2013/12/17 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
演讲稿的写法
2014/05/19 职场文书
银行员工考核评语
2014/12/31 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL