js控制的遮罩层实例介绍


Posted in Javascript onMay 29, 2013

闲来无事,把项目里很土的弹窗,改成了遮罩层显示,感觉效果好点了。上代码:
父页面:

<div id='newDiv1' style="display: none;"> 
<%@include file='/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp' %> 
<%--<jsp:include page="/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp" flush=”true”/> --%> 
</div>

printCertDia.jsp 便是要显示的最上层jsp. 如果用jsp:include 页面便会报错,至于为什么还没研究,可能和加载顺序有关。
(在给标签变量取名字时候,如果变量和id名一样时候,js也会报错,要避免)
在父页面添加触发显示遮罩层js:
在这里创建一个div和body一样大小,这样就可以把整个页面全部盖住了。
style.zIndex 来控制覆盖的先后顺序(层级)
style.filter ,style.opacity 控制显示透明°。
//mask遮罩层 
var newMask = document.createElement("div"); 
newMask.id = m; 
newMask.style.position = "absolute"; 
newMask.style.zIndex = "1"; 
_scrollWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth); 
_scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
newMask.style.width = _scrollWidth + "px"; 
newMask.style.height = _scrollHeight + "px"; 
newMask.style.top = "0px"; 
newMask.style.left = "0px"; 
newMask.style.background = "#666"; 
newMask.style.filter = "alpha(opacity=40)"; 
newMask.style.opacity = "0.40"; 
document.body.appendChild(newMask);

js控制父页面已经定义好的div显示:
newDiv=document.getElementById("newDiv1"); 
// var newDiv = document.createElement("div"); 
// newDiv.id = _id; 
newDiv.style.position = "absolute"; 
newDiv.style.zIndex = "9999"; 
newDivWidth = 700; 
newDivHeight = 600; 
newDiv.style.width = newDivWidth + "px"; 
newDiv.style.height = newDivHeight + "px"; 
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px"; 
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px"; 
newDiv.style.background = "#F7F7EF"; 
newDiv.style.border = "1px solid #860001"; 
newDiv.style.padding = "5px"; 
newDiv.style.display='';

js控制父页面div滚动居中:
attachEvent ,addEventListener 对scroll 添加处理事件 newDivCenter
function newDivCenter() { 
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px"; 
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px"; 
} 
if (document.all) { 
window.attachEvent("onscroll", newDivCenter); 
} 
else { 
window.addEventListener('scroll', newDivCenter, false); 
}

动态给父页面div添加关闭图层和遮罩层(需要修改):
var newA = document.createElement("a"); 
newA.href = "#"; 
newA.innerHTML = "关闭"; 
newA.onclick = function() { 
if (document.all) { 
window.detachEvent("onscroll", newDivCenter); 
} 
else { 
window.removeEventListener('scroll', newDivCenter, false); 
} 
document.body.removeChild(docEle("newDiv1")); 
document.body.removeChild(docEle(m)); 
document.getElementById("certImg").style.display=''; 
return false; 
} 
newDiv.appendChild(newA);
Javascript 相关文章推荐
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
js控制web打印(局部打印)方法整理
May 29 #Javascript
js动态为代码着色显示行号
May 29 #Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 #Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 #Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 #Javascript
js仿百度有啊通栏展示效果实现代码
May 28 #Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 #Javascript
You might like
php escape URL编码
2008/12/10 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
JQuery index()方法使用代码
2010/06/02 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
jQuery操作css样式
2017/05/15 jQuery
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
Python兔子毒药问题实例分析
2015/03/05 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
python 多进程队列数据处理详解
2019/12/23 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
自动一体化专业求职信
2014/03/15 职场文书
中国梦读书活动总结
2014/07/10 职场文书
村班子对照检查材料
2014/08/18 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
大学生团员个人总结
2015/02/14 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python