好资源导航 » 文章资讯 » 使用jQuery实现更改默认alert框体

使用jQuery实现更改默认alert框体

2024-04-02 06:30:06 473

更改框体主要用到的是更改系统的内置控件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>

以上所述就是本文的全部内容了，希望对大家能够有所帮助。

返回顶部
3162201930
czq8825@qq.com