js创办自定义对话框

js创建自定义对话框
一:
这是只是一个很简单的例子

createDialog: function(flag){            var dialogMark = document.getElementById("dialogMark");            var dialogContent = document.getElementById("dialogContent");var dialogIframe = document.getElementById("dialogIframe");if(typeof(dialogContent)=="unfined"||dialogContent==null){dialogContent = document.createElement("div");dialogContent.id="dialogContent";dialogContent.innerHTML="This is a message of dialog.";dialogContent.style.backgroundColor="#FF0000";dialogContent.style.width="100%";dialogContent.style.height="100%";dialogContent.style.border="1px solid #00FFFF";}if(typeof(dialogMark)=="unfined"||dialogMark==null){dialogMark = document.createElement("div");dialogMark.id="dialogMark";dialogMark.innerHTML="[<a href='#' onclick="commonUtils.createDialog('N')">X</a>]";dialogMark.style.backgroundColor="#FF00FF";dialogMark.style.top="100px";dialogMark.style.left="100px";dialogMark.style.width="600px";dialogMark.style.height="300px";dialogMark.style.position="absolute";dialogMark.style.filter="alpha(opacity=80)";dialogMark.style.border="2px solid #00FF00";dialogMark.appendChild(dialogContent);document.body.appendChild(dialogMark);}if(typeof(dialogIframe)=="unfined"||dialogIframe==null){dialogIframe = document.createElement("iframe");dialogIframe.id="dialogIframe";dialogIframe.style.backgroundColor="#660066";dialogIframe.style.top="0px";dialogIframe.style.left="0px";dialogIframe.style.width=window.screen.availWidth+"px";dialogIframe.style.height=window.screen.availHeight+"px";dialogIframe.style.filter="alpha(opacity=20)";dialogIframe.style.position="absolute";//dialogIframe.appendChild(dialogMark);document.body.appendChild(dialogIframe);}if(flag=="Y"){dialogIframe.style.zIndex=10000;dialogMark.style.zIndex=10001;dialogContent.style.zIndex=10002;dialogIframe.style.display="";dialogMark.style.display="";dialogContent.style.display="";}else{dialogIframe.style.zIndex=-1;dialogMark.style.zIndex=-2;dialogContent.style.zIndex=-3;dialogIframe.style.display="none";dialogMark.style.display="none";dialogContent.style.display="none";}        }

为了让对话框的内容更丰富，可以直接在html写代码，然后方法里面不要创建dialogContent这个元素就可以。

二:

<div id="dialogMark" onmouseout="commonUtils.showNoteDialog('N')">This is a message of dialog.</div></div>

css:
.dialogMark{
background: #FF00FF;
top:70px;
width:750px;
height: 300px;
text-align: right;
position:absolute;
display: "";
}
.dialogMark .dialogContent{
background-color: #660066;
top:0px;
left:0px;
height: 90%;
width: 100%;
color: Red;
}

JS:

showNoteDialog: function(flag){            var dialogMark = document.getElementById("dialogMark");            var dialogContent = document.getElementById("dialogContent");            var dialogIframe = document.getElementById("dialogIframe");                        dialogMark.style.left = currMouseClickX + "px";            dialogMark.style.filter = "alpha(opacity=80)";                        if (typeof(dialogIframe) == "undefined" || dialogIframe == null) {                dialogIframe = document.createElement("iframe");                dialogIframe.id = "dialogIframe";                dialogIframe.style.backgroundColor = "#ADD8E6";                dialogIframe.style.top = "0px";                dialogIframe.style.left = "0px";                var width = window.screen.availWidth;                var heigth = window.screen.availHeight + 200;                dialogIframe.style.width = width + "px";                dialogIframe.style.height = heigth + "px";                dialogIframe.style.filter = "alpha(opacity=20)";                dialogIframe.style.position = "absolute";                dialogIframe.style.display = "none";                document.body.appendChild(dialogIframe);            }                                    //alert(flag);            if (flag == "Y") {                //alert("show");                dialogIframe.style.zIndex = 100000;                dialogMark.style.zIndex = 100001;                dialogContent.style.zIndex = 100002;                dialogIframe.style.display = "";                dialogMark.style.display = "";                dialogContent.style.display = "";            }            else {                //alert("hidden");                dialogIframe.style.zIndex = -1;                dialogMark.style.zIndex = -2;                dialogContent.style.zIndex = -3;                dialogIframe.style.display = "none";                dialogMark.style.display = "none";                dialogContent.style.display = "none";            }        }

查看更多 下一篇