js控制的遮罩层实例介绍

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

　　父页面：

复制代码代码如下:

　　<%@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);

教程首页更多教程