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>