javascript實現的彈出層背景置灰-模擬

 本文為大家介紹下使用javascript實現的彈出層背景置灰-模擬(easyui dialog) 具體實現如下，感興趣的朋友可以參考下

頁面比較丑，只把功能實現了。^ ^  代碼如下: <title>模仿easyui dialog的效果</title>  <script>  //取得頁面元素  var getElement = function() {  return document.getElementById(arguments[0]) || false;  }  function openDialog(dialogId) {  var maskId = "mask";  //如果有，先刪除原來的  if (getElement(dialogId)) {  document.removeChild(getElement(dialogId));//刪除操作：彈出的div  }  if (getElement(maskId)) {  document.removeChild(getElement(maskId));//刪除操作：彈出的不可操作(面具)層  }    //背景置灰  var maskDiv = document.createElement("div");  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";//透明度  document.body.appendChild(maskDiv);//向body之中增加背景層    //Dialog  var dialogDiv = 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) - 200) / 2 + "px"; // 屏幕居中  dialogDiv.style.left = (parseInt(document.body.scrollWidth) - 400) / 2 + "px"; // 屏幕居中  dialogDiv.style.background = "white";  dialogDiv.style.border = "1px solid gray";  dialogDiv.style.padding = "5px";  dialogDiv.innerHTML = "(Dialog Content)";  //Dialog之中的關閉操作：關閉背景層和Dialog層  var closeControlloer = document.createElement("a");//創建一個超鏈接(做為關閉的觸發)  closeControlloer.href = "#";  closeControlloer.innerHTML = "關閉";  closeControlloer.onclick = function() {  document.body.removeChild(getElement(dialogId));//刪除diaglog  document.body.removeChild(getElement(maskId));//刪除背景層  }  dialogDiv.appendChild(closeControlloer);//dialog之中增加"關閉"操作  document.body.appendChild(dialogDiv);//body之中增加dialog  }  </script>  <a href="#" onclick="openDialog('dialog');">Open Dialog</a>