美化js系统函数alert，confirm，prompt，并实现lightbox效果（http://blog.csdn.net/showbo/archive/）

view plaincopy to clipboardprint?
var Showbo={author:'showbo',homepage:'http://www.code-design.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='<iframe src="javascript:false" mce_src="javascript:false" style="position:absolute; visibility:inherit; top:0px;left:0px;width:100%; height:100%; z-index:-1;' 
          +'filter=\'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)\';"></iframe>', 
      html='<div class="top"><div class="right"><div class="title" id="dvMsgTitle"></div></div></div>'+ 
        '<div class="body"><div class="right"><div class="ct" id="dvMsgCT"></div></div></div>'+ 
        '<div class="bottom" id="dvMsgBottom"><div class="right"><div class="btn" id="dvMsgBtns"></div></div></div>'; 
      this.dvMsgBox=document.createElement("div"); 
      this.dvMsgBox.id="dvMsgBox"; 
      this.dvMsgBox.innerHTML+=html;       
      document.body.appendChild(this.dvMsgBox); 
      this.lightBox=document.createElement("div"); 
      this.lightBox.id="ShowBolightBox"; 
      document.body.appendChild(this.lightBox); 
      if(Showbo.IsIE&&Showbo.IEVersion<7){//加iframe层修正ie6下无法遮盖住select的问题 
        this.lightBox.innerHTML+=ifStr; 
        this.dvMsgBox.innerHTML+=ifStr; 
      } 
      this.dvBottom=Showbo.$('dvMsgBottom'); 
      this.dvBtns=Showbo.$('dvMsgBtns'); 
      this.dvCT=Showbo.$('dvMsgCT'); 
      this.dvTitle=Showbo.$('dvMsgTitle'); 
      this.IsInit=true; 
    }, 
    checkDOMLast:function(){//此方法非常关键，要不无法显示弹出窗口。两个对象dvMsgBox和lightBox必须处在body的最后两个节点内 
      if(document.body.lastChild!=this.lightBox){ 
        document.body.appendChild(this.dvMsgBox); 
        document.body.appendChild(this.lightBox); 
      } 
    }, 
    createBtn:function(p,v,fn){ 
        var btn=document.createElement("input"); 
        btn.type="button"; 
        btn.className='btn'; 
        btn.value=v; 
        btn.onmouseover=function(){this.className='btnfocus';} 
        btn.onmouseout=function(){this.className='btn';} 
        btn.onclick=function(){ 
          Showbo.Msg.hide(); 
          if(fn)fn(p); 
        } 
        return btn; 
    }, 
    alert:function(msg){ 
      this.show({buttons:{yes:'确认'},msg:msg}); 
    }, 
    confirm:function(msg,fn){ 
      //fn为回调函数，参数和show方法的一致 
      this.show({buttons:{yes:'确认',no:'取消'},msg:msg,title:'提示',fn:fn}); 
    }, 
    prompt:function(labelWord,defaultValue,txtId,fn){ 
      if(!labelWord)labelWord='请输入：'; 
      if(!defaultValue)defaultValue=""; 
      if(!txtId)txtId="msg_txtInput"; 
      this.show({title:'输入提示',msg:labelWord+'<input type="text" id="'+txtId+'" style="width:200px" value="'+defaultValue+'"/>',buttons:{yes:'确认',no:'取消'},fn:fn}); 
    }, 
    wait:function(msg,title){ 
      if(!msg)msg='正在处理..'; 
      this.show({title:title,msg:msg,wait:true}); 
    }, 
    show:function(cfg){ 
      //cfg:{title:'',msg:'',wait:true,icon:'默认为信息',buttons:{yes:'',no:''},fn:function(btn){回调函数,btn为点击的按钮，可以为yes，no},width:显示层的宽} 
      //如果是等待则wait后面的配置不需要了。。  
      if(!cfg)throw("没有指定配置文件！"); 
      //添加窗体大小改变监听 
      if(Showbo.IsIE)window.attachEvent("onresize",this.onResize); 
      else  window.addEventListener("resize",this.onResize,false); 
       
      if(!this.IsInit)this.InitMsg();//初始化dom对象 
      else this.checkDOMLast();//检查是否在最后 
       
      //检查是否要指定宽，默认为300 
      if(cfg.width)this.defaultWidth=cfg.width; 
      this.dvMsgBox.style.width=this.defaultWidth+'px'; 
      //可以直接使用show方法停止为进度条的窗口 
      if(this.timer){clearInterval(this.timer);this.timer=null;}       
      this.dvTitle.innerHTML=''; 
      if(cfg.title)this.dvTitle.innerHTML=cfg.title; 
      this.dvCT.innerHTML=''; 
      if(cfg.wait){ 
        if(cfg.msg)this.dvCT.innerHTML=cfg.msg; 
        this.dvCT.innerHTML+='<div class="pro"><div class="bg" id="dvProcessbar"></div></div>'; 
        this.dvBtns.innerHTML=''; 
        this.dvBottom.style.height='10px'; 
        this.timer=setInterval(function(){Showbo.Msg.moveProcessbar();},1000); 
      } 
      else{ 
        //if(!cfg.icon)cfg.icon=Showbo.Msg.INFO; 
        if(!cfg.buttons||(!cfg.buttons.yes&&!cfg.buttons.no)){ 
          cfg.buttons={yes:'确定'}; 
        } 
        if(cfg.icon)this.dvCT.innerHTML='<div class="icon '+cfg.icon+'"></div>'; 
        if(cfg.msg)this.dvCT.innerHTML+=cfg.msg+'<div class="clear"></div>'; 
        this.dvBottom.style.height='45px'; 
        this.dvBtns.innerHTML='<div class="height"></div>'; 
        if(cfg.buttons.yes){ 
          this.dvBtns.appendChild(this.createBtn('yes',cfg.buttons.yes,cfg.fn)); 
          if(cfg.buttons.no)this.dvBtns.appendChild(document.createTextNode('　')); 
        } 
        if(cfg.buttons.no)this.dvBtns.appendChild(this.createBtn('no',cfg.buttons.no,cfg.fn)); 
      } 
      Showbo.initBodyScale(); 
      this.dvMsgBox.style.display='block'; 
      this.lightBox.style.display='block'; 
      this.onResize(false); 
    }, 
    hide:function(){ 
      this.dvMsgBox.style.display='none'; 
      this.lightBox.style.display='none'; 
      if(this.timer){clearInterval(this.timer);this.timer=null;} 
      if(Showbo.IsIE)window.detachEvent('onresize',this.onResize); 
      else window.removeEventListener('resize',this.onResize,false); 
    }, 
    onResize:function(isResize){ 
       if(isResize)Showbo.initBodyScale(); 
       Showbo.Msg.lightBox.style.width=Showbo.BodyScale.tx+'px'; 
       Showbo.Msg.lightBox.style.height=Showbo.BodyScale.ty+'px'; 
       Showbo.Msg.dvMsgBox.style.top=document.documentElement.scrollTop+Math.floor((Showbo.BodyScale.y-Showbo.Msg.dvMsgBox.offsetHeight)/2)+'px'; 
       Showbo.Msg.dvMsgBox.style.left=Math.floor((Showbo.BodyScale.x-Showbo.Msg.dvMsgBox.offsetWidth)/2)+'px'; 
    } 
} 

msg.css

view plaincopy to clipboardprint?
/*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;} 

测试页面及说明

view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
   <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
   <title>编程设计网--美化alert，confirm，并实现lightbox效果</title> 
   <meta id="metaKey" name="Keywords" content="美化alert，confirm，并实现lightbox效果" /> 
   <meta id="metaDes" name="Description" content="美化alert，confirm，并实现lightbox效果" /> 
   <link href="images/msg.css" mce_href="images/msg.css" type="text/css" rel="Stylesheet" /> 
   <mce:script type="text/javascript" src="msg.js" mce_src="msg.js"></mce:script> 
   <mce:style type="text/css"><!--
   body{font-size:14px;}
   
--></mce:style><style type="text/css" mce_bogus="1">   body{font-size:14px;} 
   </style> 
</head> 
<body> 
<h4>注意alert，confirm及prompt并不同于系统的，这个是用层模仿的，并不能挂起程序的执行<br /> 
所以如果需要在确认后执行相关的操作，需要在配置文件中传递回调函数fn<br /> 
按钮只提供yes和no两个 
</h4> 
Showbo.Msg.alert：参数（要显示的信息）<br />如 Showbo.Msg.alert('你好！')<hr /> 
Showbo.Msg.confirm：参数（提示信息<font color="red">，回调函数</font>）<br />如 Showbo.Msg.confirm('确认删除？！',function(btn){alert('你点击的按钮为'+btn);})<hr /> 
Showbo.Msg.prompt：参数（输入框前的文字，输入框默认值，输入框id<font color="red">，回调函数</font>）， 
<br />如 Showbo.Msg.prompt(null,null,function(btn){if(btn=='yes')alert('输入的值为\t\t'+Showbo.$('msg_txtInput').value);});<br />如果未指定“输入框id”， 输入框的id默认为'msg_txtInput"<hr /> 
Showbo.Msg.show：参数（cfg）<br /> 
<b>cfg:{title:'标题'<br />,msg:'信息内容'<br />,wait:true<br />,icon:'提示图标'<br />,buttons:{yes:'yes按钮显示的文字',no:'no按钮显示的文字'}<br />,width:显示的层宽度<br /><font color="red">,fn:function(btn){回调函数，btn为点击的按钮，可以为yes，no}</font>}</b> 
<br /> 
icon的值为Showbo.Msg.ERROR，Showbo.Msg.INFO，Showbo.Msg.WARNING  这个3个<br /> 
上面的3个方法其实调用的还是此方法，show方法可以 
<hr /> 
 
<br /> 
上面的<font color="red">回调函数中参数只有一个，那就是点了哪个按钮！<b>[yes或者no]</b></font> 
<br /><br /><br />测试代码<br /><br /> 
 
<input type="button" value="Showbo.Msg.alert" onclick="Showbo.Msg.alert('你好！')"/><br/> 
<input type="button" value="Showbo.Msg.confirm" onclick="Showbo.Msg.confirm('确认删除？！',function(btn){alert('你点击的按钮为'+btn);})"/><br/> 
<input type="button" value="Showbo.Msg.prompt" onclick="popInput()"/><br/> 
<input type="button" value="Showbo.Msg.wait" onclick="Showbo.Msg.wait('正在更新信息...','请等待')"/><br/> 
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/> 
1<br/>1<br/>1<br/>1<br/>21<br/>21 
<mce:script type="text/javascript"><!-- 
function popInput(){ 
  //输入框的id为msg_txtInput 
  Showbo.Msg.prompt(null,null,null,function(btn){ 
    if(btn=='yes')alert('输入的值为\t\t'+Showbo.$('msg_txtInput').value); 
  }); 
} 
// --></mce:script><span style="display:none" mce_style="display:none"><mce:script type='text/javascript' src="http://xslt.alexa.com/site_stats/js/t/a?url=http://www.code-design.cn" mce_src="http://xslt.alexa.com/site_stats/js/t/a?url=http://www.code-design.cn"></mce:script></span> 
</body> 
</html>