0
点赞
收藏
分享

微信扫一扫

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

举报

相关推荐

自定义带搜索的对话框

0 条评论