javascript实现的弹出层背景置灰-模拟(easyui dialog)_javascript技巧

<script> <BR>//取得页面元素 <BR>var getElement = function() { <BR>return document.getElementById(arguments[0]) || false; <BR>} <BR>function openDialog(dialogId) { <BR>var maskId = "mask"; <BR>//如果有，先删除原来的 <BR>if (getElement(dialogId)) { <BR>document.removeChild(getElement(dialogId));//删除操作：弹出的div <BR>} <BR>if (getElement(maskId)) { <BR>document.removeChild(getElement(maskId));//删除操作：弹出的不可操作(面具)层 <BR>} <br><br>//背景置灰 <BR>var maskDiv = document.createElement("div"); <BR>maskDiv.id = maskId; <BR>maskDiv.style.position = "absolute"; <BR>maskDiv.style.zIndex = "1"; <BR>maskDiv.style.width = document.body.scrollWidth + "px"; <BR>maskDiv.style.height = document.body.scrollHeight + "px"; <BR>maskDiv.style.top = "0px"; <BR>maskDiv.style.left = "0px"; <BR>maskDiv.style.background = "gray"; <BR>maskDiv.style.filter = "alpha(opacity=10)"; <BR>maskDiv.style.opacity = "0.30";//透明度 <BR>document.body.appendChild(maskDiv);//向body之中增加背景层 <br><br>//Dialog <BR>var dialogDiv = document.createElement("div"); <BR>dialogDiv.id = dialogId; <BR>dialogDiv.style.position = "absolute"; <BR>dialogDiv.style.zIndex = "9999"; <BR>dialogDiv.style.width = "400px"; <BR>dialogDiv.style.height = "200px"; <BR>dialogDiv.style.top = (parseInt(document.body.scrollHeight) - 200) / 2 + "px"; // 屏幕居中 <BR>dialogDiv.style.left = (parseInt(document.body.scrollWidth) - 400) / 2 + "px"; // 屏幕居中 <BR>dialogDiv.style.background = "white"; <BR>dialogDiv.style.border = "1px solid gray"; <BR>dialogDiv.style.padding = "5px"; <BR>dialogDiv.innerHTML = "(Dialog Content)"; <BR>//Dialog之中的关闭操作：关闭背景层和Dialog层 <BR>var closeControlloer = document.createElement("a");//创建一个超链接(做为关闭的触发) <BR>closeControlloer.href = "#"; <BR>closeControlloer.innerHTML = "关闭"; <BR>closeControlloer.onclick = function() { <BR>document.body.removeChild(getElement(dialogId));//删除diaglog <BR>document.body.removeChild(getElement(maskId));//删除背景层 <BR>} <BR>dialogDiv.appendChild(closeControlloer);//dialog之中增加"关闭"操作 <BR>document.body.appendChild(dialogDiv);//body之中增加dialog <BR>} <BR></script>
Open Dialog