The background of the pop-up layer implemented by javascript is grayed out - simulation (easyui dialog)

The page is rather ugly and only functions are implemented. ^ ^

Copy the code code as follows:

<title>Imitate the effect of easyui dialog</title>

<script>

//Get page elements

var getElement = function() {

return document.getElementById(arguments[0]) || false;

}

function openDialog(dialogId) {

var maskId = "mask";

//If there is one, delete the original one first

if (getElement(dialogId)) {

document.removeChild(getElement(dialogId));//Delete operation: pop-up div

}

if (getElement(maskId)) {

document.removeChild(getElement(maskId));//Delete operation: Pop-up inoperable (mask) layer

}

//The background is grayed out

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";//Transparency

document.body.appendChild(maskDiv);//Add a background layer to the 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"; // Center the screen

dialogDiv.style.left = (parseInt(document.body.scrollWidth) - 400) / 2 + "px"; // Center the screen

dialogDiv.style.background = "white";

dialogDiv.style.border = "1px solid gray";

dialogDiv.style.padding = "5px";

dialogDiv.innerHTML = "(Dialog Content)";

//Close operation in Dialog: close the background layer and Dialog layer

var closeControlloer = document.createElement("a");//Create a hyperlink (as a trigger for closing)

closeControlloer.href = "#";

closeControlloer.innerHTML = "Close";

closeControlloer.onclick = function() {

document.body.removeChild(getElement(dialogId));//Delete diaglog

document.body.removeChild(getElement(maskId));//Remove the background layer

}

dialogDiv.appendChild(closeControlloer);//Add "close" operation to dialog

document.body.appendChild(dialogDiv);//Add dialog to body

}

</script>

<a href="#" onclick="openDialog('dialog');">Open Dialog</a>