主要是用来代替alert confrim。当然不能和其他比,学习,练习,样式有些丑......
/* *Msg 有三个参数 msg,obj,ev msg 是弹出窗体要提示的消息 obj 是 隐藏消息框要处理的元素 ev 事件 主要用于阻止浏览器默认事件( 获取事件 ev || event) */ (function(window,undefined){ var _$ = window.$, document = window.document; var $= function(id){ return "string" == typeof id ? document.getElementById(id) : id; }, createObj= function(obj){ return document.createElement(obj); }, isIE6= function(){ return (navigator.userAgent.indexOf('MSIE 6.') >= 0); }, maskBox= function(){//遮罩层 var mask=createObj('div'), e=document.body, h=(e.scrollHeight+60), s={ backgroundColor:'#000', width:'100%', height:h+'px', position:'absolute', left:'0', top:'0', opacity:'0.5', filter:'alpha(opacity=50)' }; for(var k in s){ mask.style[k]=s[k]; } e.appendChild(mask); return mask; }, iframe= function(){//IE6 var ifr=createObj('iframe'),e=document.body, w = e.scrollWidth, h = e.scrollHeight, s={ backgroundColor:'#000', width:w+'px', height:h+'px', position:'absolute', left:'0', top:'0', filter:'alpha(opacity=0)' }; for(var k in s){ ifr.style[k]=s[k]; } e.appendChild(ifr); return ifr; }; /* Msg 正式开始 */ var Msg=function(msg,obj,ev){ this.msg=msg; this.obj=obj; this.ev=ev; !this.ev ? this.show():this.ask();//没有ev参数时,执行show() }; Msg.prototype={ show:function(){ if(!this.msg) return; var mask=maskBox(), wrap=this.wrapBox(), _self=this,o=this.obj; if(!!isIE6()){ var ifr=iframe(); } $('msgbtn').onclick=function(){ _self.remove(mask,wrap,ifr); _self.handle(); } }, ask:function(){ if(!this.msg || !this.obj) return;//没有obj的情况下确保浏览器执行默认行为(跳转||提交); var mask=maskBox(), wrap=this.wrapBox('Y'), _self=this; this.stopDefault(); if(!!isIE6()){ var ifr=iframe(); } $('okbtn').onclick=function(){ _self.remove(mask,wrap,ifr); _self.handle(); } $('nobtn').onclick=function(){ _self.remove(mask,wrap,ifr); } }, handle:function(){//a跳转, 表单提交,其余focus; if(!this.obj || !this.obj.nodeName) return; var n=this.obj.nodeName.toLowerCase(); switch(n){ case 'a': window.location.href=this.obj.href; break; case 'input': this.obj.focus(); break; case 'form': this.obj.submit(); break; default: break; } }, stopDefault:function(){ var e= this.ev || event; if ( e && e.preventDefault ){ e.preventDefault(); }else{ window.event.returnValue = false; } }, wrapBox:function(y){//消息内容层 var wrap=createObj('div'), e=document.body, html=[], s1='', otop= (e.scrollTop||document.documentElement.scrollTop)+document.documentElement.clientHeight/2, oleft= (e.scrollLeft||document.documentElement.scrollLeft)+document.documentElement.clientWidth/2, s={ backgroundColor:'#b4cad0', width:'280px', position:'absolute', left:(oleft-150)+'px', top:otop+'px', padding:'10px' }; for(var k in s){ wrap.style[k]=s[k]; } s1='display:block;border:1px solid #a8d7e3;background:#ddf1f7 url(msgshow/pop.png) 0 -24px repeat-x;color:#38647e;width:80px;cursor:pointer'; html.push('<div style="background:#fff;color:#4b4b4b;font-size:14px;line-height:150%;padding:10px;text-align:center">'); html.push('<b style="display:block;background:url(msgshow/pop.png) 0 0 no-repeat;width:21px;height:18px;position:absolute;left:25px;top:30px;"></b>'); html.push('<b id="msg" style="display:block;border-bottom:1px dashed #ccc;padding:10px 0 10px 35px;text-align:left">'+ this.msg +'</b>'); if(!y){ html.push('<b id="msgbtn" style="margin:15px auto 0;'+s1+'">确定</b></div>'); }else{ html.push('<span style="display:block;margin:15px auto 0;width:190px;height:25px;"><b id="okbtn" style="margin-right:20px;float:left;'+s1+'">确定</b>'); html.push('<b id="nobtn" style="float:left;'+s1+'">取消</b></span></div>'); } wrap.innerHTML=html.join(''); e.appendChild(wrap); return wrap; }, remove:function(){ for(var i=0,l=arguments.length;i<l;i++){//for in arguments IE6 没有反应?? var o=arguments[i]; if(o) document.body.removeChild(o); } } }; _Msg = window.Msg; window.Msg= Msg; })(window);