使用jQuery实现更改默认alert框体
前端之家收集整理的这篇文章主要介绍了
使用jQuery实现更改默认alert框体,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
更改框体主要用到的是更改系统的内置控件winpop下面是winpop具体代码
var HTMLS = {
ovl: '<div class="J_WinpopMask winpop-mask" id="J_WinpopMask">
' + '<div class="J_Winpop
Box winpop-
Box" id="J_Winpop
Box">' + '<div class="J_WinpopMain winpop-main">
' + '<div class="J_WinpopBtns winpop-btns">
' + '
',alert: '<input type="button" class="J_AltBtn pop-btn alert-button" value="确定">',confirm: '<input type="button" class="J_CfmFalse pop-btn confirm-false" value="取消">' + '<input type="button" class="J_CfmTrue pop-btn confirm-true" value="确定">'
}
function Winpop() {
var config = {};
this.get = function(n) {
return config[n];
}
this.set = function(n,v) {
config[n] = v;
}
this.init();
}
Winpop.prototype = {
init: function() {
this.createDom();
this.bindEvent();
},createDom: function() {
var body = jQuery("body"),ovl = jQuery("#J_WinpopBox");
if (ovl.length === 0) {
body.append(HTMLS.ovl);
}
this.set("ovl",jQuery("#J_Winpop<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"));
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) {
var cb = _this.get("confirmBack");
_this.hide();
cb && cb(true);
});
ovl.on("click",".J_CfmFalse",function(e) {
var cb = _this.get("confirmBack");
_this.hide();
cb && cb(false);
});
mask.on("click",function(e) {
_this.hide();
});
jQuery(document).on("keyup",function(e) {
var kc = e.keyCode,cb = _this.get("confirmBack");;
if (kc === 27) {
_this.hide();
} else if (kc === 13) {
_this.hide();
if (_this.get("type") === "confirm") {
cb && cb(true);
}
}
});
},alert: function(str,btnstr) {
var str = typeof str === 'string' ? str : str.toString(),ovl = this.get("ovl");
this.set("type","alert");
ovl.find(".J_WinpopMain").html(str);
if (typeof btnstr == "undefined") {
ovl.find(".J_WinpopBtns").html(HTMLS.alert);
} else {
ovl.find(".J_WinpopBtns").html(btnstr);
}
this.show();
},confirm: function(str,callback) {
var str = typeof str === 'string' ? str : str.toString(),"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() {
var ovl = 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();
delete window.alert;
delete window.confirm;
}
};
var obj = new Winpop();
window.alert = function(str) {
obj.alert.call(obj,str);
};
window.confirm = function(str,cb) {
obj.confirm.call(obj,str,cb);
};
})(window,jQuery);