js创建自定义对话框

最新推荐文章于 2020-06-02 14:25:11 发布

不净之心

最新推荐文章于 2020-06-02 14:25:11 发布

阅读量718

点赞数

分类专栏： Javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/pyzheng/article/details/84005521

版权

Javascript 专栏收录该内容

145 篇文章 1 订阅

订阅专栏

一:
这是只是一个很简单的例子

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";
            }
        }