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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
js文件中调用js的实现方法小结
Oct 23 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 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扩展介绍与开发教程
2010/08/19 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
appium+python adb常用命令分享
2020/03/06 Python
大学生应聘自荐信
2013/10/11 职场文书
办公室文员工作自我评价
2013/12/01 职场文书
创文明城市标语
2014/06/16 职场文书
班子四风对照检查材料
2014/08/21 职场文书
公司股东出资证明书
2014/11/01 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
青年教师个人总结
2015/02/11 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
学校就业保障协议书
2019/06/24 职场文书
利用Apache Common将java对象池化的问题
2022/06/16 Servers
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js