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

父页面：

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

 

版权声明：本文为cheeper原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/cheeper/archive/2013/05/29/3105485.html