Der Hintergrund der durch Javascript implementierten Popup-Ebene ist ausgegraut - Simulation (EasyUI-Dialog)

Die Seite ist eher hässlich und es sind nur Funktionen implementiert. ^ ^

Kopieren Sie den Codecode wie folgt:

<title>Imitieren Sie den Effekt des EasyUI-Dialogs</title>

<Skript>

//Seitenelemente abrufen

var getElement = function() {

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

}

Funktion openDialog(dialogId) {

var maskId = "mask";

//Wenn es eines gibt, löschen Sie zuerst das Original

if (getElement(dialogId)) {

document.removeChild(getElement(dialogId));//Löschvorgang: Popup-Div

}

if (getElement(maskId)) {

document.removeChild(getElement(maskId));//Löschvorgang: Popup-inoperable (Masken-)Ebene

}

//Der Hintergrund ist ausgegraut

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

document.body.appendChild(maskDiv);//Hinzufügen einer Hintergrundebene zum Körper

//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" // Zentrieren Sie den Bildschirm

dialogDiv.style.left = (parseInt(document.body.scrollWidth) - 400) / 2 + "px" // Zentrieren Sie den Bildschirm

dialogDiv.style.background = "white";

dialogDiv.style.border = "1px einfarbig grau";

dialogDiv.style.padding = "5px";

dialogDiv.innerHTML = "(Dialoginhalt)";

//Vorgang im Dialog schließen: Hintergrundebene und Dialogebene schließen

var closeControlloer = document.createElement("a");//Hyperlink erstellen (als Auslöser für das Schließen)

closeControlloer.href = "#";

closeControlloer.innerHTML = "Schließen";

closeControlloer.onclick = function() {

document.body.removeChild(getElement(dialogId));//Diaglog löschen

document.body.removeChild(getElement(maskId));//Entferne die Hintergrundebene

}

dialogDiv.appendChild(closeControlloer); // „Schließen“-Vorgang zum Dialog hinzufügen

document.body.appendChild(dialogDiv);//Dialog zum Text hinzufügen

}

</script>

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