Introduction to the mask layer instance controlled by js _ javascript tips-js tutorial

I changed the pop-up window in the project to the mask layer for display. Now I feel much better. Create a div with the same size as the body, so that you can cover all the pages. For more information, see this article, change the pop-up window in the project to the mask layer display, and the effect is better. Code:
Parent page:

The Code is as follows:

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

PrintCertDia. jsp is the top-level jsp to be displayed. If you use the jsp: include page, an error is reported. As to why it hasn't been studied, it may be related to the loading order.
(Js reports an error if the variable name is the same as the id name when the label variable is named. Avoid this problem)
Add the trigger display mask layer js on the parent page:
Create a p with the same size as the body, so that the entire page can be covered.
Style. zIndex to control the overwrite sequence (level)
Style. filter, style. opacity control display transparency °.

The Code is as follows:

// Mask Layer
Var newMask = document. createElement ("p ");
NewMask. id = m;
NewMask. style. position = "absolute ";
NewMask. style. zIndex = "1 ";
_ ScrollWidth = Math. max (document. body. scrollWidth, document.doc umentElement. scrollWidth );
_ ScrollHeight = Math. max (document. body. scrollHeight, document.doc umentElement. 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 p display defined on the parent page:

The Code is as follows:

NewDiv = document. getElementById ("newDiv1 ");
// Var newDiv = document. createElement ("p ");
// 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 p scrolling center of the parent page:
AttachEvent and addEventListener add event newDivCenter for scroll

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

Dynamically Add a close layer and a mask layer to the parent page p (to be modified ):

The Code is as follows:

Var newA = document. createElement ("");
NewA. href = "#";
NewA. innerHTML = "disabled ";
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 );