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>