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 Ajax异步读取RSS文档具体实现
Dec 12 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
node.js基础知识汇总
Aug 25 Javascript
创建与框架无关的JavaScript插件
Dec 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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python 列表(List)操作方法详解
2014/03/11 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
keras 权重保存和权重载入方式
2020/05/21 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书