JavaScript implementation of pop-up layer background gray-simulation

  This article describes the use of JavaScript implementation of pop-up layer background gray-Simulation (Easyui dialog) specifically implemented as follows, interested friends can refer to the following

The page is ugly, only to achieve the function. ^ ^  code is as follows: <title> imitate Easyui Dialog Effect </title>  <script> //Get page element   var getelement = function () {  return document.getElementById (arguments[0]) | | false; }  function OpenDialog (dialogid) {  var maskid = "Mask"; //if available, first delete original   if (GetElement (dialogID)) {  Document.removechild (getelement (dialogID)); /delete operation: Pop-up div }  if (getelement (maskid)) {  Document.removechild (GetElement (Maskid));/delete operation: Pop-up not operated ( Mask) layer  }   //Background grey   var maskdiv = document.createelement ("div");  maskdiv.id = maskid;  Mask Div.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 background layer    //dialog  var dialogdiv to Body Document.createelement ("div");  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)-2 + "px"; Screen Center   DialogDiv.style.left = (parseint (document.body.scrollWidth)-)/2 + "px"; Screen Center   DialogDiv.style.background = "White";  DialogDiv.style.border = "1px solid gray";  dialogDiv.style.padding = "5px";  dialogdiv.innerhtml = "(Dialog Content)";  The shutdown operation in//dialog: Close the background layer and the Dialog layer & nbsp var closecontrolloer = document.createelement ("a");//Create a hyperlink (as triggered off)   Closecontrolloer.href = "#";  closecontrolloer.innerhtml = "Close";  Closecontrolloer.onclick = function () {  document.body.removeChild ( GetElement (dialogID));//Delete Diaglog  Document.body.removeChild (GetElement (Maskid));//delete background layer  }  dialogdiv.appendchild ( CLOSECONTROLLOER);//dialog added "close" operations   Document.body.appendChild (DIALOGDIV);//body dialog  </script>  <a href= "#" onclick= "OpenDialog (' dialog ');" >open dialog</a>