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);//增加背景層

//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>