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

前端之家收集整理的这篇文章主要介绍了使用jQuery实现更改默认alert框体前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

var HTMLS = {
ovl: '<div class="J_WinpopMask winpop-mask" id="J_WinpopMask">
' + '<div class="J_WinpopBox winpop-Box" id="J_WinpopBox">' + '<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];
}

  1. this.set = function(n,v) {
  2. config[n] = v;
  3. }
  4. this.init();

}

Winpop.prototype = {
init: function() {
this.createDom();
this.bindEvent();
},createDom: function() {
var body = jQuery("body"),ovl = jQuery("#J_WinpopBox");

  1. if (ovl.length === 0) {
  2. body.append(HTMLS.ovl);
  3. }
  4. this.set("ovl",jQuery("#J_Winpop<a href="/tag/Box/" target="_blank" class="keywords">Box</a>"));
  5. this.set("mask",jQuery("#J_WinpopMask"));
  6. },bindEvent: function() {
  7. var _this = this,ovl = _this.get("ovl"),mask = _this.get("mask");
  8. ovl.on("click",".J_AltBtn",function(e) {
  9. _this.hide();
  10. });
  11. ovl.on("click",".J_CfmTrue",function(e) {
  12. var cb = _this.get("confirmBack");
  13. _this.hide();
  14. cb && cb(true);
  15. });
  16. ovl.on("click",".J_CfmFalse",function(e) {
  17. var cb = _this.get("confirmBack");
  18. _this.hide();
  19. cb && cb(false);
  20. });
  21. mask.on("click",function(e) {
  22. _this.hide();
  23. });
  24. jQuery(document).on("keyup",function(e) {
  25. var kc = e.keyCode,cb = _this.get("confirmBack");;
  26. if (kc === 27) {
  27. _this.hide();
  28. } else if (kc === 13) {
  29. _this.hide();
  30. if (_this.get("type") === "confirm") {
  31. cb && cb(true);
  32. }
  33. }
  34. });
  35. },alert: function(str,btnstr) {
  36. var str = typeof str === 'string' ? str : str.toString(),ovl = this.get("ovl");
  37. this.set("type","alert");
  38. ovl.find(".J_WinpopMain").html(str);
  39. if (typeof btnstr == "undefined") {
  40. ovl.find(".J_WinpopBtns").html(HTMLS.alert);
  41. } else {
  42. ovl.find(".J_WinpopBtns").html(btnstr);
  43. }
  44. this.show();
  45. },confirm: function(str,callback) {
  46. var str = typeof str === 'string' ? str : str.toString(),"confirm");
  47. ovl.find(".J_WinpopMain").html(str);
  48. ovl.find(".J_WinpopBtns").html(HTMLS.confirm);
  49. this.set("confirmBack",(callback || function() {}));
  50. this.show();
  51. },show: function() {
  52. this.get("ovl").show();
  53. this.get("mask").show();
  54. },hide: function() {
  55. var ovl = this.get("ovl");
  56. ovl.find(".J_WinpopMain").html("");
  57. ovl.find(".J_WinpopBtns").html("");
  58. ovl.hide();
  59. this.get("mask").hide();
  60. },destory: function() {
  61. this.get("ovl").remove();
  62. this.get("mask").remove();
  63. delete window.alert;
  64. delete window.confirm;
  65. }

};

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);

然后实例化对象

以下JS不可少

猜你在找的jQuery相关文章