The background of the pop-up layer implemented by javascript is dimmed-simulation (easyuidialog) _ javascript skills

This article introduces the implementation of easyuidialog in the context of the pop-up layer implemented by javascript. If you are interested, refer to the ugly page and only implement the function. ^

The Code is as follows:

Imitating easyui dialog
Script
// Retrieve page elements
Var getElement = function (){
Return document. getElementById (arguments [0]) | false;
}
Function openDialog (dialogId ){
Var maskId = "mask ";
// If yes, delete the original
If (getElement (dialogId )){
Document. removeChild (getElement (dialogId); // delete operation: the pop-up p
}
If (getElement (maskId )){
Document. removeChild (getElement (maskId); // delete operation: the non-operational (mask) layer is displayed.
}

// Set the background to gray
Var maskDiv = document. createElement ("p ");
MaskDiv. id = maskId;
MaskDiv. style. position = "absolute ";
MaskDiv. style. zIndex = "1 ";
MaskDiv. style. width = document. body. scrollWidth + "px ";
MaskDiv. style. height = document. body. scrollHeight + "px ";
MaskDiv. style. top = "0px ";
MaskDiv. style. left = "0px ";
MaskDiv. style. background = "gray ";
MaskDiv. style. filter = "alpha (opacity = 10 )";
MaskDiv. style. opacity = "0.30"; // transparency
Document. body. appendChild (maskDiv); // Add the background layer to the body.

// Dialog
Var dialogDiv = document. createElement ("p ");
DialogDiv. id = dialogId;
DialogDiv. style. position = "absolute ";
DialogDiv. style. zIndex = "9999 ";
DialogDiv. style. width = "400px ";
DialogDiv. style. height = "200px ";
DialogDiv. style. top = (parseInt (document. body. scrollHeight)-200)/2 + "px"; // center the screen
DialogDiv. style. left = (parseInt (document. body. scrollWidth)-400)/2 + "px"; // center the screen
DialogDiv. style. background = "white ";
DialogDiv. style. border = "1px solid gray ";
DialogDiv. style. padding = "5px ";
DialogDiv. innerHTML = "(Dialog Content )";
// Close operation in Dialog: Close the background layer and Dialog Layer
Var closeControlloer = document. createElement ("a"); // create a hyperlink (triggered as a closed link)
CloseControlloer. href = "#";
CloseControlloer. innerHTML = "disabled ";
CloseControlloer. onclick = function (){
Document. body. removeChild (getElement (dialogId); // Delete diaglog
Document. body. removeChild (getElement (maskId); // Delete the background layer
}
DialogDiv. appendChild (closeControlloer); // Add the "close" Operation in the dialog.
Document. body. appendChild (dialogDiv); // Add dialog to the body.
}
Script
Open Dialog