美化js系统函数alert，confirm，prompt，并实现lightbox效果
注意：1)alert，confirm及prompt并不同于系统的，这个是用层模仿的，并不能挂起程序的执行
2)所以如果需要在确认后执行相关的操作，需要在配置文件中传递回调函数fn
3)按钮只提供yes和no两个
点击查看示例效果
示例代码下载
msg.js
var Showbo={author:'showbo',homepage:'http://www.w3dev.cn'}; //是否为ie浏览器 Showbo.IsIE=!!document.all; //ie浏览器版本 Showbo.IEVersion=(function(){if(!Showbo.IsIE)return -1;try{return parseFloat(/msie ([/d/.]+)/i.exec(navigator.userAgent)[1]);}catch(e){return -1;}})(); //按id获取对象 Showbo.$=function(Id,isFrame){var o;if("string"==typeof(Id))o= document.getElementById(Id);else if("object"==typeof(Id))o= Id;else return null;return isFrame?(Showbo.IsIE?frames[Id]:o.contentWindow):o;} //按标签名称获取对象 //页面的高和宽****************************** Showbo.isStrict=document.compatMode == "CSS1Compat"; Showbo.BodyScale={x:0,y:0,tx:0,ty:0};//（x，y）：当前的浏览器容器大小 （tx，ty）：总的页面滚动宽度和高度 Showbo.getClientHeight=function(){/*if(Showbo.IsIE)*/return Showbo.isStrict ? document.documentElement.clientHeight :document.body.clientHeight;/*else return self.innerHeight;*/} Showbo.getScrollHeight=function(){var h=!Showbo.isStrict?document.body.scrollHeight:document.documentElement.scrollHeight;return Math.max(h,this.getClientHeight());} Showbo.getHeight=function(full){return full?this.getScrollHeight():this.getClientHeight();} Showbo.getClientWidth=function(){/*if(Showbo.IsIE)*/return Showbo.isStrict?document.documentElement.clientWidth:document.body.clientWidth;/*else return self.innerWidth;*/} Showbo.getScrollWidth=function(){var w=!Showbo.isStrict?document.body.scrollWidth:document.documentElement.scrollWidth;return Math.max(w,this.getClientWidth());} Showbo.getWidth=function(full){return full?this.getScrollWidth():this.getClientWidth();} Showbo.initBodyScale=function(){Showbo.BodyScale.x=Showbo.getWidth(false);Showbo.BodyScale.y=Showbo.getHeight(false);Showbo.BodyScale.tx=Showbo.getWidth(true);Showbo.BodyScale.ty=Showbo.getHeight(true);} //页面的高和宽****************************** Showbo.Msg={ INFO:'info', ERROR:'error', WARNING:'warning', IsInit:false, timer:null, dvTitle:null, dvCT:null, dvBottom:null, dvBtns:null, lightBox:null, dvMsgBox:null, defaultWidth:300, moveProcessbar:function(){ var o=Showbo.$('dvProcessbar'),w=o.style.width; if(w=='')w=20; else{ w=parseInt(w)+20; if(w>100)w=0; } o.style.width=w+'%'; }, InitMsg:function(width){ //ie下不按照添加事件的循序来执行，所以要注意在调用alert等方法时要检测是否已经初始化IsInit=true var ifStr='', html='
msg.css
/*Msg*/ #dvMsgBox{display:none;position:absolute;font-size:12px;width:300px;background:transparent url(top-bottom.png) repeat-x;overflow:hidden;z-index:999;} #dvMsgBox .top{height:24px;background:transparent url(left-corners.png) no-repeat;padding-left:6px;} #dvMsgBox .top .right{height:100%;background:transparent url(right-corners.png) no-repeat right top;padding-right:6px;} #dvMsgBox .top .right .title{cursor:move;background:transparent url(top-bottom.png) repeat-x;height:100%;line-height:24px;color:#15428b;vertical-align:middle;font-weight:bold;overflow:hidden;} #dvMsgBox .body{background:transparent url(left-right.png) repeat-y;padding-left:10px;} #dvMsgBox .body .right{background:transparent url(left-right.png) repeat-y right;padding-right:2px;} #dvMsgBox .body .right .ct{background-color:#cddef3 !important;background-color:#cadaec;line-height:20px;vertical-align:middle;width:100%;} #dvMsgBox .body .right .ct .pro{width:280px;border:solid 1px #6593cf;height:25px;background:#ffffff;line-height:23px;overflow:hidden;} #dvMsgBox .body .right .ct .pro .bg{width:0%;height:100%;background:#c9dffc;} #dvMsgBox .bottom{background:transparent url(left-corners.png) no-repeat left bottom;padding-left:6px;} #dvMsgBox .bottom .right{height:100%;background:transparent url(right-corners.png) no-repeat right bottom;padding-right:6px;} #dvMsgBox .bottom .right .btn{height:100%;background:transparent url(top-bottom.png) repeat-x left bottom;text-align:center;} #dvMsgBox .bottom .right .btn input{border:0px;width:70px;height:22px;text-align:center;line-height:22px;vertical-align:middle;cursor:pointer;} #dvMsgBox .bottom .right .btn input.btn{background:url(btn.gif) no-repeat;} #dvMsgBox .bottom .right .btn input.btnfocus{background:url(btnfocus.gif) no-repeat;} #dvMsgBox .icon{width:32px;height:32px;float:left;margin-right:10px;} #dvMsgBox .error{background:url(icon-error.gif) no-repeat;} #dvMsgBox .info{background:url(icon-info.gif) no-repeat;} #dvMsgBox .warning{background:url(icon-warning.gif) no-repeat;} #dvMsgBox .clear{clear:both;} #dvMsgBox .height{height:10px;line-height:10px;} #ShowBolightBox{display:none;-moz-opacity:0.5;filter:alpha(opacity=50);opacity:0.5;background-color:#000000;z-index:100;position:absolute;left:0px;top:0px;}
测试页面及说明
注意alert，confirm及prompt并不同于系统的，这个是用层模仿的，并不能挂起程序的执行
所以如果需要在确认后执行相关的操作，需要在配置文件中传递回调函数fn
按钮只提供yes和no两个
Showbo.Msg.alert：参数（要显示的信息）如 Showbo.Msg.alert('你好！')
Showbo.Msg.confirm：参数（提示信息，回调函数）
如 Showbo.Msg.confirm('确认删除？！',function(btn){alert('你点击的按钮为'+btn);})
Showbo.Msg.prompt：参数（输入框前的文字，输入框默认值，输入框id，回调函数），
如 Showbo.Msg.prompt(null,null,function(btn){if(btn=='yes')alert('输入的值为/t/t'+Showbo.$('msg_txtInput').value);});
如果未指定“输入框id”， 输入框的id默认为'msg_txtInput"
Showbo.Msg.show：参数（cfg）
cfg:{title:'标题'
,msg:'信息内容'
,wait:true
,icon:'提示图标'
,buttons:{yes:'yes按钮显示的文字',no:'no按钮显示的文字'}
,width:显示的层宽度
,fn:function(btn){回调函数，btn为点击的按钮，可以为yes，no}}
icon的值为Showbo.Msg.ERROR，Showbo.Msg.INFO，Showbo.Msg.WARNING 这个3个
上面的3个方法其实调用的还是此方法，show方法可以
上面的回调函数中参数只有一个，那就是点了哪个按钮！[yes或者no]
测试代码
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
21
21