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" class="dialogMark">
      [<a href="#">X</a>]
      <div id="dialogContent" class="dialogContent" 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";
            }
        }