js控制的遮罩层实例介绍

时间：2021-06-20 08:48:07|栏目：JavaScript代码|点击：次

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

 
<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代码

下一篇：判断file框选择的是否为图片

本文标题：js控制的遮罩层实例介绍

本文地址：http://www.codeinn.net/misctech/144867.html

更多JavaScript代码

JavaScript代码

js控制的遮罩层实例介绍

阅读排行

推荐教程