JavaScript pop-up layer and background darkening code implementation

Do you know about the implementation methods of the JavaScript pop-up layer and background dimming? Here we will share with you the implementation code, hoping it will be helpful for your learning.

The JavaScript pop-up layer and background are dimmed.

In the JavaScript pop-up layer, the background is dimmed, and the code is not much. You can adjust it as needed. Here, the basic idea is implemented, and beautification is not very good.

The Code is as follows:

 
 

  
  
<Title> JavaScript pop-up layer, dimmed background </title>
  
  
<Script>
  
  
VardocEle = function (){
  
  
Returndocument. getElementById (arguments [0]) | false;
  
  
}
  
  
FunctionopenNewDiv (_ id ){
  
  
Varm = "mask ";
  
  
If (docEle (_ id) document. removeChild (docEle (_ id ));
  
  
If (docEle (m) document. removeChild (docEle (m ));
  
  
// Www.codefans.net new activation Layer
  
  
VarnewDiv = document. createElement ("div ");
  
  
NewDiv. id = _ id;
  
  
NewDiv. style. position = "absolute ";
  
  
NewDiv. style. zIndex = "9999 ";
  
  
NewDiv. style. width = "200px ";
  
  
NewDiv. style. height = "300px ";
  
  
NewDiv. style. top = "100px ";
  
  
NewDiv. style. left =
  
  
(ParseInt (document. body. scrollWidth)-300)/2 + "px ";
  
  
// Center the screen
  
  
NewDiv. style. background = "EEEEEE ";
  
  
NewDiv. style. border = "1 pxsolid # 0066cc ";
  
  
NewDiv. style. padding = "5px ";
  
  
NewDiv. innerHTML = "new activation layer content ";
  
  
Document. body. appendChild (newDiv );
  
  
// Mask Layer
  
  
VarnewMask = document. createElement ("div ");
  
  
NewMask. id = m;
  
  
NewMask. style. position = "absolute ";
  
  
NewMask. style. zIndex = "1 ";
  
  
NewMask. style. width = document. body. scrollWidth + "px ";
  
  
NewMask. style. height = document. body. scrollHeight + "px ";
  
  
NewMask. style. top = "0px ";
  
  
NewMask. style. left = "0px ";
  
  
NewMask. style. background = "#000 ";
  
  
NewMask. style. filter = "alpha (opacity = 40 )";
  
  
NewMask. style. opacity = "0.40 ";
  
  
Document. body. appendChild (newMask );
  
  
// Docutmentwww.codefans.net
  
  
// Close the mask and new layers.
  
  
VarnewA = document. createElement ("");
  
  
NewA. href = "#";
  
  
NewA. innerHTML = "Disable the activation layer ";
  
  
NewA. onclick = function (){
  
  
Document. body. removeChild (docEle (_ id ));
  
  
Document. body. removeChild (docEle (m ));
  
  
Returnfalse;
  
  
}
  
  
NewDiv. appendChild (newA );
  
  
}
  
  
</Script>
  
  
<Ahrefahref = "#" onclick = "openNewDiv (newDiv); returnfalse;">
  
  
A new layer is displayed. </a>