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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值