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名相同，JavaScript也会报错，需避免此类命名冲突。

遮罩层样式与创建

此处创建一个与body元素尺寸相同的div，从而覆盖整个页面。

通过 style.zIndex 属性控制覆盖层的层级顺序。

通过 style.filter 和 style.opacity 属性控制遮罩层的透明度。

 
// 创建遮罩层
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);

弹窗居中定位逻辑

控制父页面中已定义的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='';

滚动事件处理

控制父页面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);
} 

关闭逻辑与清理

}

 
具体代码如下：
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "关闭";
newA.onclick = function() {
if (document.all) {
} 
window.detachEvent("onscroll", newDivCenter);
} else {
} 
移除文档中ID为newDiv1的元素节点：document.body.removeChild(docEle("newDiv1"));
document.body.removeChild(docEle("newDiv1"));
document.body.removeChild(docEle(m));
document.getElementById("certImg").style.display='';
} 
return false;