[JavaScript]自定义MessageBox

还记得Windows下的MessageBox嘛?

    IE呢?Alert?Confirm? 是不是好丑呢?

    不过丑就算了,关键是还不好用.

    本次的目标是,提供好看又好用的Web版的Windows MessageBox.(已测试,兼容IE和FF)

正文:

    首先自然是先画好Html下的对话框样子了(用层来模拟):

 

 

画得不专业,先用着,反正后面可以通过css来调整.

    接下来的工作就是需要通过Javascript动态输入这个层的内容.首先参考[JavaScript]自定义Title的显示方式中的方式,代码虽然很多,不过只不过比[JavaScript]自定义Title的显示方式多了几个层而已,大同小异:KMessageBox = { name: "KMessageBox", capiton : "消息框", content: "提示消息", msgbox : null, msgcaptioninfo:null, msgcontent:null, msgContenttxtmsg:null, msgbuttonyes:null, msbbuttonno:null, msgico:null }; KMessageBox.init = function () { var msgNameSpaceURI = "http://www.w3.org/1999/xhtml"; if(!msgContainerID){ var msgContainerID= "KMessageBox"; } if(!msgCaptionID){ var msgCaptionID= "KMessageBox_caption"; } if(!msgCaptionInfoID){var msgCaptionInfoID = "KMessageBox_caption_info";} if(!msgContentID){ var msgContentID = "KMessageBox_content"; } if(!msgContentTxtID){ var msgContentTxtID= "KMessageBox_content_txt"; } if(!msgContentTxtICOID){var msgContentTxtICOID="KMessageBox_content_txt_ico"}; if(!msgContentTxtMsgID){var msgContentTxtMsgID="KMessageBox_content_txt_msg"}; if(!msgButtons){var msgButtonsID="KMessageBox_buttons"}; if(!msgButtonYes){var msgButtonYesID="KMessageBox_buttons_yes"}; if(!msgButtonNo){var msgButtonNoID="KMessageBox_buttons_no"}; if(!msgButtonOK){var msgButtonOKID="KMessageBox_buttons_ok"}; var msgContainer = $(msgContainerID); if(!msgContainer) { msgContainer = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div"); msgContainer.setAttribute("id", msgContainerID); msgContainer.setAttribute("style","MARGIN: 0px auto; POSITION: absolute; TEXT-ALIGN: center;"); var msgCaption = $(msgCaptionID); if(!msgCaption){ msgCaption = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ; msgCaption.setAttribute("id",msgCaptionID); Element.addClassName(msgCaption,"caption"); var msgCaptionInfo = $(msgCaptionInfoID); if(!msgCaptionInfo){ msgCaptionInfo = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ; msgCaptionInfo.setAttribute("id",msgCaptionInfoID); Element.addClassName(msgCaptionInfo,"info"); msgCaption.appendChild(msgCaptionInfo); } msgContainer.appendChild(msgCaption); } var msgContent = $(msgContentID); if(!msgContent){ msgContent= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ; msgContent.setAttribute("id",msgContentID); Element.addClassName(msgContent,"content"); var msgContentTxt = $(msgContentTxtID); if(!msgContentTxt ){ msgContentTxt = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ; msgContentTxt.setAttribute("id",msgContentTxtID); Element.addClassName(msgContentTxt,"txt"); var msgContentTxtICO = $(msgContentTxtICOID); if(!msgContentTxtICO) { msgContentTxtICO= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "img") : document.createElement("img") ; msgContentTxtICO.setAttribute("id",msgContentTxtICOID); msgContentTxtICO.setAttribute("src","icon_alarm.gif"); msgContentTxtICO.setAttribute("align","absMiddle"); msgContentTxtICO.setAttribute("style","height:52px;width:64px;background-image:url('icon_big_info.gif');"); msgContentTxt.appendChild(msgContentTxtICO); } var msgContentTxtMsg= $(msgContentTxtMsgID); if(!msgContentTxtMsg) { msgContentTxtMsg= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "span") : document.createElement("span") ; msgContentTxtMsg.setAttribute("id",msgContentTxtMsgID); msgContentTxt.appendChild(msgContentTxtMsg); } var msgButtons = $(msgButtonsID); if(!msgButtons) { msgButtons = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ; msgButtons.setAttribute("id",msgButtonsID); Element.addClassName(msgButtons,"btnlist"); var msgButtonYes = $(msgButtonYesID); if(!msgButtonYes) { msgButtonYes= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ; msgButtonYes.setAttribute("id",msgButtonYesID); msgButtonYes.setAttribute("type","button"); msgButtonYes.setAttribute("value","YES"); Element.addClassName(msgButtonYes,"input_set"); msgButtons.appendChild(msgButtonYes); } var msgButtonNo = $(msgButtonNoID); if(!msgButtonNo) { msgButtonNo= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ; msgButtonNo.setAttribute("id",msgButtonNoID); msgButtonNo.setAttribute("type","button"); msgButtonNo.setAttribute("value","NO"); Element.addClassName(msgButtonNo,"input_set"); msgButtons.appendChild(msgButtonNo); } var msgButtonOK= $(msgButtonOKID); if(!msgButtonOK) { msgButtonOK= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ; msgButtonOK.setAttribute("id",msgButtonOKID); msgButtonOK.setAttribute("type","button"); msgButtonOK.setAttribute("value","OK"); Element.addClassName(msgButtonOK,"input_set"); msgButtons.appendChild(msgButtonOK); } msgContentTxt.appendChild(msgButtons); } msgContent.appendChild(msgContentTxt); } msgContainer.appendChild(msgContent); } document.getElementsByTagName("body").item(0).appendChild(msgContainer); } this.msgbox = $(this.name); this.msgcaptioninfo = $(msgCaptionInfoID); this.msgContenttxtmsg= $(msgContentTxtMsgID); this.msgbuttonyes = $(msgButtonYesID); this.msgbuttonno = $(msgButtonNoID); this.msgbuttonok = $(msgButtonOKID); this.msgico = $(msgContentTxtICOID); Element.hide(this.msgbox); }

接下来应该为MessageBox提供行为能力.我们需要模拟Confirm和Alert.
    原始的Confrim需要返回false或者true来决定是否要运行postback事件.
    在这里我转换了一下思路,不返回值,而是直接将postback事件的脚本(_doPostBack('',''))传入MessageBox,并绑定到相关的按钮上.所以我们的需要接受传入的参数主要有:消息标题,消息内容,按钮事件
    OK,接下来构造Javascript中MessageBox的ShowConfirm函数:

KMessageBox.ShowConfirm = function (imgdir,caption,msg,YesClick,NoClick) { if (!this.msgbox ) return; this.msgcaptioninfo.innerHTML = caption; this.msgContenttxtmsg.innerHTML = msg; //为了提示消息前面的图片可以适应实际的相对位置,传入程序父目录,主要为封装为Server控件做准备 if(imgdir != "") { this.msgico.setAttribute("src",imgdir+"/kinnsoft_client/KMessageBox/icon_alarm.gif"); } else { this.msgico.setAttribute("src","/kinnsoft_client/KMessageBox/icon_alarm.gif"); } //使用prototype类库 Element.show(this.msgbox); Element.show(this.msgbuttonyes); Element.show(this.msgbuttonno); Element.hide(this.msgbuttonok); var x=0,y=0; x = (document.documentElement.scrollLeft || document.body.scrollLeft); y = (document.documentElement.scrollTop || document.body.scrollTop); /*一下这段这么复杂的处理方法,是为了符合最新web标准,因为在aspx页面中会默认加入 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 29新的标准中不支持document.body.clientHeight 属性,它是MSIE所有的 */ var theWidth=0,theHeight=0; if (window.innerWidth) { theWidth = window.innerWidth theHeight = window.innerHeight } else if (document.documentElement && document.documentElement.clientWidth) { theWidth = document.documentElement.clientWidth theHeight = document.documentElement.clientHeight } else if (document.body) { theWidth = document.body.clientWidth theHeight = document.body.clientHeight } //做div居中处理 this.msgbox.style.left = (theWidth - this.msgbox.offsetWidth)/2+x; this.msgbox.style.top = (theHeight - this.msgbox.offsetHeight)/2+y; //绑定传入的事件 this.msgbuttonyes.onclick = YesClick;//function(){ alert('yes');}; this.msgbuttonno.onclick = NoClick; //绑定隐藏div的事件,使用prototype类库 Event.observe(this.msgbuttonyes,"click",function(){KMessageBox.Hide();},true); Event.observe(this.msgbuttonno,"click",function(){KMessageBox.Hide();},true); } 

 

  有了显示还需要做隐藏处理,即上面调用的KMessageBox.Hide();

 

KMessageBox.Hide = function() { if (!this.msgbox ) return; Element.hide(this.msgbox); //detach 事件,防止IE 内存泄漏 Event.stopObserving(this.msgbuttonyes,"click",function(){KMessageBox.Hide();},true) Event.stopObserving(this.msgbuttonno,"click",function(){KMessageBox.Hide();},true) Event.stopObserving(this.msgbuttonok,"click",function(){KMessageBox.Hide();},true) } 

 

 至于模拟Alert,就可以模仿ShowConfirm来做了,so easy
    
    ok,整个MessageBox 类看起来已经像模像样了.运行一下...
    
     噫,不对,好像缺了点什么....没错,它不是ShowModal类型的...用户还可以任意点下面的页面元素.

     这个怎么模拟?

     当然还是div了...做一个整个页面大小的div覆盖在所有页面元素之上,MessageBox层之下.
     
     不过有个弊端,div不能覆盖select控件,那只好搬出iframe了..所谓道高一尺魔高一丈

 

function DialogModal(){ this.blankImgHandle = null; this.tags = new Array("applet", "iframe", "select","object","embed"); } DialogModal.Show = function() { debugger; var NameSpaceURI = "http://www.w3.org/1999/xhtml"; this.blankImgHandle = document.createElementNS ? document.createElementNS(NameSpaceURI, "iframe") : document.createElement("iframe") ;//iframe this.blankImgHandle.setAttribute("id","blankImgHanldle"); with (this.blankImgHandle.style){ position = "absolute"; left = 0; top = (document.documentElement.scrollTop || document.body.scrollTop); height = "100%"; //这边用100%在 标准生成的aspx页面好像比起效果,去掉doctype那句就可以,所以我直接设置一个分辨率即1024X768 width = "100%"; zIndex = "9999"; //这个zIndex比页面所有元素大,但是要比MessageBox小,保证MessageBox 不被罩住 filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=40)"; opacity = "0.1"; } document.getElementsByTagName("body").item(0).appendChild(this.blankImgHandle); } DialogModal.Close = function(){ if (this.blankImgHandle) { Element.remove(this.blankImgHandle); this.blankImgHandle = null; } };  

 

在MessageBox中Show的时候,调用DialogModal.Show,Hide的时候调用DialogModal.Hide 即ok了.

    有了上面的两个Javascript类,我们就可以很好的做服务端的封装了,取到control的dopostback函数,直接传入给ShowConfrim就可以了.

 

//ShowConfirm客户端事件 private string JS_CONFIRM = "KMessageBox.ShowConfirm('{0}','{1}','{2}',{3},{4});return false;"; //获取DoPostBack事件,这边还有个难点,怎么取得客户端验证事件,目前我还没有解决 strOnClickScript = "function(){" + Page.ClientScript.GetPostBackEventReference(control, "") + ";}"; //注册MessageBox事件, control.Attributes["onclick"] += string.Format(JS_CONFIRM, this.mImgDir, caption, content, strOnClickScript, "function(){}"); 

 

KMessageBox.js 

 

KMessageBox = { name: "KMessageBox", capiton : "消息框", content: "提示消息", bottom: "底部消息框", msgbox : null, msgbottominfo:null, msgcaptioninfo:null, msgcontent:null, msgContenttxtmsg:null, msgbuttonyes:null, msbbuttonno:null, msgico:null }; KMessageBox.init = function () {//初始化容器 var msgNameSpaceURI = "http://www.w3.org/1999/xhtml"; if(!msgContainerID){ var msgContainerID= "KMessageBox"; } if(!msgCaptionID){ var msgCaptionID= "KMessageBox_caption"; } if(!msgCaptionInfoID){var msgCaptionInfoID = "KMessageBox_caption_info";} if(!msgBottomID){ var msgBottomID = "KMessageBox_bottom";} if(!msgBottomInfo){ var msgBottomInfoID = "KMessageBox_bottom_info" ;} if(!msgContentID){ var msgContentID = "KMessageBox_content"; } if(!msgContentTxtID){ var msgContentTxtID= "KMessageBox_content_txt"; } if(!msgContentTxtICOID){var msgContentTxtICOID="KMessageBox_content_txt_ico"}; if(!msgContentTxtMsgID){var msgContentTxtMsgID="KMessageBox_content_txt_msg"}; if(!msgButtons){var msgButtonsID="KMessageBox_buttons"}; if(!msgButtonYes){var msgButtonYesID="KMessageBox_buttons_yes"}; if(!msgButtonNo){var msgButtonNoID="KMessageBox_buttons_no"}; if(!msgButtonOK){var msgButtonOKID="KMessageBox_buttons_ok"}; /***msgContainer总容器**/ var msgContainer = $(msgContainerID); if(!msgContainer) { msgContainer = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div"); msgContainer.setAttribute("id", msgContainerID); msgContainer.setAttribute("style","MARGIN: 0px auto; POSITION: absolute; TEXT-ALIGN: center;"); /***caption头部信息**/ var msgCaption = $(msgCaptionID); if(!msgCaption){ msgCaption = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ; msgCaption.setAttribute("id",msgCaptionID); Element.addClassName(msgCaption,"caption"); /***captionInfo头部信息**/ var msgCaptionInfo = $(msgCaptionInfoID); if(!msgCaptionInfo){ msgCaptionInfo = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ; msgCaptionInfo.setAttribute("id",msgCaptionInfoID); Element.addClassName(msgCaptionInfo,"info"); msgCaption.appendChild(msgCaptionInfo); } msgContainer.appendChild(msgCaption); /***captionInfo头部信息**/ } /***captionInfo头部信息**/ /***content内容**/ var msgContent = $(msgContentID); if(!msgContent){ msgContent= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ; msgContent.setAttribute("id",msgContentID); Element.addClassName(msgContent,"content"); /***contentTexICO**/ var msgContentTxtICO = $(msgContentTxtICOID); if(!msgContentTxtICO) { msgContentTxtICO= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "img") : document.createElement("img") ; msgContentTxtICO.setAttribute("id",msgContentTxtICOID); msgContentTxtICO.setAttribute("src","../../images/MessageIcon/MessageError.gif"); msgContentTxtICO.setAttribute("align","left"); Element.addClassName(msgContentTxtICO,"imgg"); msgContent.appendChild(msgContentTxtICO); } /***contentTexICO**/ /***contentTxt**/ var msgContentTxt = $(msgContentTxtID); if(!msgContentTxt ){ msgContentTxt = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ; msgContentTxt.setAttribute("id",msgContentTxtID); Element.addClassName(msgContentTxt,"txt"); /***contentTexMsg**/ var msgContentTxtMsg= $(msgContentTxtMsgID); if(!msgContentTxtMsg) { msgContentTxtMsg= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "span") : document.createElement("span") ; msgContentTxtMsg.setAttribute("id",msgContentTxtMsgID); msgContentTxt.appendChild(msgContentTxtMsg); } /***contentTexMsg**/ msgContent.appendChild(msgContentTxt); } /***contentTxt**/ /***button**/ var msgButtons = $(msgButtonsID); if(!msgButtons) { msgButtons = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ; msgButtons.setAttribute("id",msgButtonsID); Element.addClassName(msgButtons,"btnlist"); /***buttonYes**/ var msgButtonYes = $(msgButtonYesID); if(!msgButtonYes) { msgButtonYes= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ; msgButtonYes.setAttribute("id",msgButtonYesID); msgButtonYes.setAttribute("type","button"); msgButtonYes.setAttribute("value","YES"); Element.addClassName(msgButtonYes,"input_set"); msgButtons.appendChild(msgButtonYes); } /***buttonYes**/ /***buttonNO**/ var msgButtonNo = $(msgButtonNoID); if(!msgButtonNo) { msgButtonNo= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ; msgButtonNo.setAttribute("id",msgButtonNoID); msgButtonNo.setAttribute("type","button"); msgButtonNo.setAttribute("value","NO"); Element.addClassName(msgButtonNo,"input_set"); msgButtons.appendChild(msgButtonNo); } /***buttonNO**/ /***buttonOK**/ var msgButtonOK= $(msgButtonOKID); if(!msgButtonOK) { msgButtonOK= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ; msgButtonOK.setAttribute("id",msgButtonOKID); msgButtonOK.setAttribute("type","button"); msgButtonOK.setAttribute("value","OK"); Element.addClassName(msgButtonOK,"button_bak"); msgButtons.appendChild(msgButtonOK); } /***button**/ msgContent.appendChild(msgButtons); } /***button**/ msgContainer.appendChild(msgContent); } /***content内容**/ /***bottom 底部信息**/ var msgBottom = $(msgBottomID); if(!msgBottom){ msgBottom = document.createElementNS ? document.createElementNS (msgNameSpaceURI,"div") : document.createElement("div"); msgBottom.setAttribute("id",msgBottomID); Element.addClassName(msgBottom,"bottom1"); var msgBottomInfo = $(msgBottomInfoID); if(!msgBottomInfo){ msgBottomInfo = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ; msgBottomInfo.setAttribute("id",msgBottomInfoID); Element.addClassName(msgBottomInfo,"info"); msgBottom.appendChild(msgBottomInfo); } msgContainer.appendChild(msgBottom); } /***bottom 底部信息**/ document.getElementsByTagName("body").item(0).appendChild(msgContainer); } /***msgContainer总容器**/ this.msgbox = $(this.name); this.msgcaptioninfo = $(msgCaptionInfoID); this.msgContenttxtmsg= $(msgContentTxtMsgID); this.msgbuttonyes = $(msgButtonYesID); this.msgbuttonno = $(msgButtonNoID); this.msgbuttonok = $(msgButtonOKID); this.msgico = $(msgContentTxtICOID); Element.hide(this.msgbox); } KMessageBox.ShowConfirm = function (imgdir,caption,msg,YesClick,NoClick) { if (!this.msgbox ) return; //alert(document.body.style.overflowY); DialogModal.Show(); this.msgcaptioninfo.innerHTML = caption; this.msgContenttxtmsg.innerHTML = msg; if(imgdir != "") { this.msgico.setAttribute("src",imgdir+"../../images/MessageIcon/MessageError.gif"); } else { this.msgico.setAttribute("src","../../images/MessageIcon/MessageError.gif"); } Element.show(this.msgbox); Element.show(this.msgbuttonyes); Element.show(this.msgbuttonno); Element.hide(this.msgbuttonok); var x=0,y=0; x = (document.documentElement.scrollLeft || document.body.scrollLeft); y = (document.documentElement.scrollTop || document.body.scrollTop); var theWidth=0,theHeight=0; if (window.innerWidth) { theWidth = window.innerWidth theHeight = window.innerHeight } else if (document.documentElement && document.documentElement.clientWidth) { theWidth = document.documentElement.clientWidth theHeight = document.documentElement.clientHeight } else if (document.body) { theWidth = document.body.clientWidth theHeight = document.body.clientHeight } this.msgbox.style.left = (theWidth - this.msgbox.offsetWidth)/2+x; this.msgbox.style.top = (theHeight - this.msgbox.offsetHeight)/2+y; this.msgbuttonyes.onclick = YesClick; this.msgbuttonno.onclick = NoClick; Event.observe(this.msgbuttonyes,"click",function(){KMessageBox.Hide();},true); Event.observe(this.msgbuttonno,"click",function(){KMessageBox.Hide();},true); } KMessageBox.ShowInfo = function (imgdir,caption,msg,bottom) { if (!this.msgbox ) return; DialogModal.Show(); if(imgdir != "") { this.msgico.setAttribute("src",imgdir+"../../images/MessageIcon/MessageError.gif"); } else { this.msgico.setAttribute("src","../../images/MessageIcon/MessageError.gif"); } this.msgcaptioninfo.innerHTML = caption; this.msgContenttxtmsg.innerHTML = msg; Element.show(this.msgbox); Element.show(this.msgbuttonok); Element.hide(this.msgbuttonyes); Element.hide(this.msgbuttonno); var x=0,y=0; x = (document.documentElement.scrollLeft || document.body.scrollLeft); y = (document.documentElement.scrollTop || document.body.scrollTop); var theWidth=0,theHeight=0; if (window.innerWidth) { theWidth = window.innerWidth theHeight = window.innerHeight } else if (document.documentElement && document.documentElement.clientWidth) { theWidth = document.documentElement.clientWidth theHeight = document.documentElement.clientHeight } else if (document.body) { theWidth = document.body.clientWidth theHeight = document.body.clientHeight } this.msgbox.style.left = (theWidth - this.msgbox.offsetWidth)/2+x; this.msgbox.style.top = (theHeight - this.msgbox.offsetHeight)/2+y; Event.observe(this.msgbuttonok,"click",function(){KMessageBox.Hide();},true); } KMessageBox.ShowInfo_Href = function (imgdir,caption,msg,url,bottom) { if (!this.msgbox ) return; DialogModal.Show(); if(imgdir != "") { this.msgico.setAttribute("src",imgdir+"../../images/MessageIcon/MessageError.gif"); } else { this.msgico.setAttribute("src","../../images/MessageIcon/MessageError.gif"); } this.msgcaptioninfo.innerHTML = caption; this.msgContenttxtmsg.innerHTML = msg; Element.show(this.msgbox); Element.show(this.msgbuttonok); Element.hide(this.msgbuttonyes); Element.hide(this.msgbuttonno); var x=0,y=0; x = (document.documentElement.scrollLeft || document.body.scrollLeft); y = (document.documentElement.scrollTop || document.body.scrollTop); var theWidth=0,theHeight=0; if (window.innerWidth) { theWidth = window.innerWidth theHeight = window.innerHeight } else if (document.documentElement && document.documentElement.clientWidth) { theWidth = document.documentElement.clientWidth theHeight = document.documentElement.clientHeight } else if (document.body) { theWidth = document.body.clientWidth theHeight = document.body.clientHeight } this.msgbox.style.left = (theWidth - this.msgbox.offsetWidth)/2+x; this.msgbox.style.top = (theHeight - this.msgbox.offsetHeight)/2+y; Event.observe(this.msgbuttonok,"click",function(){KMessageBox.Hide();location.href=url;target='_top';},true); } KMessageBox.Hide = function() { if (!this.msgbox ) return; Element.hide(this.msgbox); DialogModal.Close(); Event.stopObserving(this.msgbuttonyes,"click",function(){KMessageBox.Hide();},true) Event.stopObserving(this.msgbuttonno,"click",function(){KMessageBox.Hide();},true) Event.stopObserving(this.msgbuttonok,"click",function(){KMessageBox.Hide();},true) } function DialogModal(){ this.blankImgHandle = null; this.tags = new Array("applet", "iframe", "select","object","embed"); } DialogModal.Show = function() { var NameSpaceURI = "http://www.w3.org/1999/xhtml"; this.blankImgHandle = document.createElementNS ? document.createElementNS(NameSpaceURI, "iframe") : document.createElement("iframe") ;//iframe this.blankImgHandle.setAttribute("id","blankImgHanldle"); with (this.blankImgHandle.style){ position = "absolute"; left = 0; top = (document.documentElement.scrollTop || document.body.scrollTop); height = "100%"; width = "100%"; zIndex = "9999"; filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=40)"; opacity = "0.1"; } document.getElementsByTagName("body").item(0).appendChild(this.blankImgHandle); } DialogModal.Close = function(){ if (this.blankImgHandle) { Element.remove(this.blankImgHandle); this.blankImgHandle = null; } }; Event.observe(window, 'load', function(e){KMessageBox.init();}, false); Event.observe(window, 'unload', Event.unloadCache, false); 

 

KMessageBox.css

 

#KMessageBox { margin:0px auto; width :459px; font-size:9pt; position:absolute; z-index: 10000 ; } #KMessageBox .caption { font-family:'tahoma'; font-size:8pt; background: url('../images/MessageIcon/MessageHead1.gif') no-repeat; height:48px; text-align:left; } #KMessageBox .info { float:left; color:#000; height:38px; line-height:38px; font-weight:bold; margin:8px 0 0 16px; } #KMessageBox .content { font-family:'tahoma'; font-size:8pt; word-break:break-all; width :459px; background: url('../images/MessageIcon/MessageBody1.gif') repeat-y; } #KMessageBox .button_bak { BORDER-RIGHT: medium none; BORDER-TOP: medium none; BACKGROUND-IMAGE: url(../images/MessageIcon/button_mess.gif); BORDER-LEFT: medium none; WIDTH: 61px; padding:3px 0px 0px 1px; CURSOR: hand; BORDER-BOTTOM: medium none; HEIGHT: 21px; text-align:center; FONT-SIZE: 9pt; FONT-FAMILY: tahoma,宋体; color:#33338C; } #KMessageBox .txt { margin-top:20px; text-align:left; color:#327FC6; padding:0 12px; line-height:22px; margin-left:150px; } .txt { font-family:tahoma; font-size:11px; font-weight:normal; } img{border:0} #KMessageBox .imgg { margin-top:20px; text-align:left; margin-left:70px; } #KMessageBox .bottom1{ background:url('../Images/MessageIcon/MessageEnd1.gif') no-repeat; height:29px; width:459px; } #KMessageBox .btnlist {margin-top:30px;text-align:center;} .input_set { height:25px; line-height :23px; padding: 0px 8px 0px 8px; position: relative; cursor: pointer; font-size: 9pt; background: #87A3C1 url(../Images/ICON/button_bg_on.gif); border: 1pt solid #ffffff; } .input_Alist { border-style : none; border-color: inherit; border-width: 0; width:85px; height:22px;background:#fff url('input_bg_alist.gif') no-repeat; float:left; } .PageEdit { padding-top:15px; } /********************************按钮样式START*****************************/ .table_button { margin:5px 0px 5px 0; height: 25px; font-size: 9pt; line-height: 23px; background: #5774b0 url(../Images/blue/save.gif); color: #fff; cursor: pointer; padding: 0px 4px 0px 4px; } .table_button_on { margin:5px 0px 5px 0; height: 25px; font-size: 9pt; line-height: 23px; background: #5774b0 url(../Images/blue/save.gif); color: #fff; position: relative; cursor: pointer; padding: 0px 4px 0px 4px; } .table_button_down { margin:5px 0px 5px 0; height: 25px; font-size: 9pt; line-height: 23px; background: #5774b0 url(../Images/blue/save.gif); color: #fff; position: relative; cursor: pointer; padding: 0px 4px 0px 4px; } .table_reset_button { margin:5px 0px 5px 0; height: 25px; font-size: 9pt; line-height: 23px; background: #fea500 url(../Images/blue/abb.jpg); color: #fff; cursor: pointer; padding: 0px 4px 0px 4px; } .table_reset_button_on { margin:5px 0px 5px 0; height: 25px; font-size: 9pt; line-height: 23px; background: #fea500 url(../Images/blue/abb.jpg); color: #fff; position: relative; cursor: pointer; padding: 0px 4px 0px 4px; } .table_reset_button_down { margin:5px 0px 5px 0; height: 25px; font-size: 9pt; line-height: 23px; background: #fea500 url(../Images/blue/abb.jpg); color: #fff; position: relative; cursor: pointer; padding: 0px 4px 0px 4px; } .table_in_button { padding-top:3px; border:1px solid #87A3C1 !important; border: 1pt solid #fff; font-size: 9pt; width:46px; background: #87A3C1 url(../Images/ICON/button_bg.gif); color: #33338C; cursor: pointer; } .table_in_button_on { padding-top:3px; border:1px solid #87A3C1 !important; border: 1pt solid #ffffff; font-size: 9pt; width:46px; background: #87A3C1 url(../Images/ICON/button_bg_on.gif); color: #33338C; position: relative; cursor: pointer; } .table_in_button_down { padding-top:3px; border:1px solid #87A3C1 !important; border: 1pt solid #ffffff; font-size: 9pt; width:46px; background: #87A3C1 url(../Images/ICON/button_bg_down.gif); color: #33338C; position: relative; cursor: pointer; } .search_button { margin:5px 0px 5px 0; height: 25px; font-size: 9pt; line-height: 23px; background: #fea500 url(../Images/blue/abb.jpg); color: #fff; cursor: pointer; padding:0px 4px 0px 4px; } .acc_button { padding-top:3px; border:1px solid #87A3C1 !important; border: 1pt solid #fff; font-size: 9pt; width:46px; background: #87A3C1 url(../Images/ICON/button_bg_on.gif); color: #33338C; cursor: pointer; } .search_button_down { margin:5px 0px 5px 0; height: 25px; font-size: 9pt; line-height: 23px; background:#fea500 url(../Images/blue/abb.jpg); color: #fff; cursor: pointer; padding:0px 0px 0px 0px; } .search_button_on { margin:5px 0px 5px 0; height: 25px; font-size: 9pt; line-height: 23px; background: #fea500 url(../Images/blue/abb.jpg); color: #fff; position: relative; cursor: pointer; padding:0px 0px 0px 0px; } .change_button { border: 1px solid #87A3C1; height: 18; position: relative; letter-spacing: 1; font-family: "Arial"; font-size: 9pt; line-height: 18px; padding-left: 0px; background: #87A3C1 url(../Images/ICON/button_bg.gif); color: #33338C; position: relative; top: -1; cursor: pointer; padding:1px 8px 0px 8px; text-decoration:none; } .change_button_on { border:1px solid #87A3C1; height: 18; position: relative; letter-spacing: 1; font-family: "Arial"; font-size: 9pt; line-height: 18px; padding-left: 0px; color: #33338C; background-image: url(../Images/ICON/button_bg_on.gif); position: relative; top: -1; text-decoration:none; cursor: pointer; padding:1px 8px 0px 8px; } .change_button_down { border:1px solid #87A3C1; height: 18; position: relative; letter-spacing: 1; font-family: "Arial"; font-size: 9pt; line-height: 18px; padding-left: 0px; color: #33338C; background-image: url(../Images/ICON/button_bg_down.gif); position: relative; top: -1; cursor: pointer; text-decoration:none; padding:1px 8px 0px 8px; } .table_button_delete { margin:5px 0px 5px 0; height: 25px; font-size: 9pt; line-height: 23px; background: #f05858 url(../Images/blue/bb.jpg); color: #fff; cursor: pointer; padding: 0px 4px 0px 4px; } .table_button_on_delete { margin:5px 0px 5px 0; height: 25px; font-size: 9pt; line-height: 23px; background: #f05858 url(../Images/blue/bb.jpg); color: #fff; position: relative; cursor: pointer; padding: 0px 4px 0px 4px; } .table_button_down_delete { margin:5px 0px 5px 0; height: 25px; font-size: 9pt; line-height: 23px; background: #f05858 url(../Images/blue/bb.jpg); color: #fff; position: relative; cursor: pointer; padding: 0px 4px 0px 4px; }