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

更改框体主要用到的是更改系统的内置控件winpop下面是winpop具体代码

(function(window, jQuery, undefined) {
 
   var HTMLS = {
     ovl: '' + '' + '' + '' + '',
     alert: '',
     /confirm/i: '' + ''
   }
 
   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_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) {
  var cb = _this.get("/confirm/iBack");
  _this.hide();
  cb && cb(true);
});
ovl.on("click", ".J_CfmFalse", function(e) {
  var cb = _this.get("/confirm/iBack");
  _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("/confirm/iBack");;
  if (kc === 27) {
    _this.hide();
  } else if (kc === 13) {
    _this.hide();
    if (_this.get("type") === "/confirm/i") {
      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/i: function(str, callback) {
var str = typeof str === 'string' ? str : str.toString(),
  ovl = this.get("ovl");
this.set("type", "/confirm/i");
ovl.find(".J_WinpopMain").html(str);
ovl.find(".J_WinpopBtns").html(HTMLS./confirm/i);
this.set("/confirm/iBack", (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/i;
     }
   };
 
   var obj = new Winpop();
   window.alert = function(str) {
     obj.alert.call(obj, str);
   };
   window.confirm = function(str, cb) {
     obj./confirm/i.call(obj, str, cb);
   };
 })(window, jQuery);

然后实例化对象

 var obj = new Winpop(); // 创建一个Winpop的实例对象
 // 覆盖alert控件
 window.alert = function(str) {
   obj.alert.call(obj, str);
 };
 // 覆盖/confirm/i控件
 window.confirm = function(str, cb) {
   obj./confirm/i.call(obj, str, cb);
 };

以下JS不可少

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