您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

js控制的遮罩层实例介绍

作者:佚名    责任编辑:admin    更新时间:2022-06-22

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

父页面:   代码如下: <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);