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="[X]";
				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にコードを書いてもいいです.方法の中にdialogContottという要素を作らないでください.
二番目:

			[X]
			
This is a message of dialog.

		

css:
.dialogMark{
background:钻FF 00 FF;
top:70 px
width:750 px;
height:300 px
text-align:right;
position:absolute
display:";
)
dialogMark.dialogContott｛
background-彩色:𞃳660066;
top:0 px;
left:0 px;
height:90%
width:100%
カラー: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";
            }
        }