Introduction to js controlled mask layer examples_javascript skills

I had nothing to do, so I changed the pop-up window in the project to a mask layer display, and I feel the effect is better. Upper code:
Parent page:

Copy code The code is as follows:

<%@include file='/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp' %>
<% -- --%>

printCertDia.jsp is the top-level jsp to be displayed. If the jsp:include page is used, an error will be reported. As for why I haven’t studied it yet, it may be related to the loading order.
(When naming the label variable, if the variable has the same name as the id, js will also report an error, which should be avoided)
Add js that triggers the display of the mask layer on the parent page:
Create a div here that is the same size as the body, so that it can cover the entire page.
style.zIndex to control the order (level) of overlays
style.filter, style.opacity to control display transparency.

Copy code The code is as follows:

//mask mask layer
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 controls the display of divs that have been defined on the parent page:

Copy code The code is as follows:

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 controls the scrolling and centering of the parent page div:
attachEvent, addEventListener adds processing event newDivCenter to scroll

Copy code The code is as follows:

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

Dynamicly add a closing layer and a mask layer to the parent page div (needs to be modified):

Copy code The code is as follows:

var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "Close";
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);