The page is ugly, only to achieve the function. ^ ^
<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 so, first delete the original
if (GetElement (dialogID)) {
Document.removechild (GetElement (dialogID));//delete action: Popup div
}
if (GetElement (Maskid)) {
Document.removechild (GetElement (Maskid));//delete operation: Eject non-operation (mask) layer
}
Background ash
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 background layer to 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)-2 + "px"; Center screen
DialogDiv.style.left = (parseint (document.body.scrollWidth)-)/2 + "px"; Center screen
DialogDiv.style.background = "White";
DialogDiv.style.border = "1px solid gray";
dialogDiv.style.padding = "5px";
dialogdiv.innerhtml = "(Dialog Content)";
Close operation in dialog: Close Background and dialog layers
var closecontrolloer = document.createelement ("a");//Create a hyperlink (as a shutdown trigger)
Closecontrolloer.href = "#";
closecontrolloer.innerhtml = "Close";
Closecontrolloer.onclick = function () {
Document.body.removeChild (GetElement (dialogID));//Delete Diaglog
Document.body.removeChild (GetElement (Maskid));//delete background layer
}
Dialogdiv.appendchild (closecontrolloer); add "close" action in//dialog
Document.body.appendChild (dialogdiv);//body Increase Dialog
}
</script>
<a href= "#" onclick= "OpenDialog (' dialog ');" >open dialog</a>
