使用jQuery实现更改默认alert框体
更改框体主要用到的是更改系统的内置控件winpop下面是winpop具体代码
(function(window,jQuery,undefined){ varHTMLS={ ovl:'<divclass="J_WinpopMaskwinpop-mask"id="J_WinpopMask"></div>'+'<divclass="J_WinpopBoxwinpop-box"id="J_WinpopBox">'+'<divclass="J_WinpopMainwinpop-main"></div>'+'<divclass="J_WinpopBtnswinpop-btns"></div>'+'</div>', alert:'<inputtype="button"class="J_AltBtnpop-btnalert-button"value="确定">', confirm:'<inputtype="button"class="J_CfmFalsepop-btnconfirm-false"value="取消">'+'<inputtype="button"class="J_CfmTruepop-btnconfirm-true"value="确定">' } functionWinpop(){ varconfig={}; this.get=function(n){ returnconfig[n]; } this.set=function(n,v){ config[n]=v; } this.init(); } Winpop.prototype={ init:function(){ this.createDom(); this.bindEvent(); }, createDom:function(){ varbody=jQuery("body"), ovl=jQuery("#J_WinpopBox"); if(ovl.length===0){ body.append(HTMLS.ovl); } this.set("ovl",jQuery("#J_WinpopBox")); this.set("mask",jQuery("#J_WinpopMask")); }, bindEvent:function(){ var_this=this, ovl=_this.get("ovl"), mask=_this.get("mask"); ovl.on("click",".J_AltBtn",function(e){ _this.hide(); }); ovl.on("click",".J_CfmTrue",function(e){ varcb=_this.get("confirmBack"); _this.hide(); cb&&cb(true); }); ovl.on("click",".J_CfmFalse",function(e){ varcb=_this.get("confirmBack"); _this.hide(); cb&&cb(false); }); mask.on("click",function(e){ _this.hide(); }); jQuery(document).on("keyup",function(e){ varkc=e.keyCode, cb=_this.get("confirmBack");; if(kc===27){ _this.hide(); }elseif(kc===13){ _this.hide(); if(_this.get("type")==="confirm"){ cb&&cb(true); } } }); }, alert:function(str,btnstr){ varstr=typeofstr==='string'?str:str.toString(), ovl=this.get("ovl"); this.set("type","alert"); ovl.find(".J_WinpopMain").html(str); if(typeofbtnstr=="undefined"){ ovl.find(".J_WinpopBtns").html(HTMLS.alert); }else{ ovl.find(".J_WinpopBtns").html(btnstr); } this.show(); }, confirm:function(str,callback){ varstr=typeofstr==='string'?str:str.toString(), ovl=this.get("ovl"); this.set("type","confirm"); ovl.find(".J_WinpopMain").html(str); ovl.find(".J_WinpopBtns").html(HTMLS.confirm); this.set("confirmBack",(callback||function(){})); this.show(); }, show:function(){ this.get("ovl").show(); this.get("mask").show(); }, hide:function(){ varovl=this.get("ovl"); ovl.find(".J_WinpopMain").html(""); ovl.find(".J_WinpopBtns").html(""); ovl.hide(); this.get("mask").hide(); }, destory:function(){ this.get("ovl").remove(); this.get("mask").remove(); deletewindow.alert; deletewindow.confirm; } }; varobj=newWinpop(); window.alert=function(str){ obj.alert.call(obj,str); }; window.confirm=function(str,cb){ obj.confirm.call(obj,str,cb); }; })(window,jQuery);
然后实例化对象
varobj=newWinpop();//创建一个Winpop的实例对象 //覆盖alert控件 window.alert=function(str){ obj.alert.call(obj,str); }; //覆盖confirm控件 window.confirm=function(str,cb){ obj.confirm.call(obj,str,cb); };
以下JS不可少
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <scriptsrc="winpop.js"></script>
以上所述就是本文的全部内容了,希望对大家能够有所帮助。