本文為大家介紹下使用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>