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 相关文章推荐
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
vue实现登录拦截
Jun 29 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
javascript实现多边形碰撞检测
2020/10/24 Javascript
python实现的防DDoS脚本
2011/02/08 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
打造高效课堂实施方案
2014/03/22 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
大学生工作自荐书
2014/06/16 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
见习报告的格式
2014/10/31 职场文书
作弊检讨书
2015/01/27 职场文书