更改默认alert框体

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

(function(window, jQuery, undefined) {
  2
  3     var HTMLS = {
  4         ovl: '<div class="J_WinpopMask winpop-mask" id="J_WinpopMask"></div>' + '<div class="J_WinpopBox winpop-box" id="J_WinpopBox">' + '<div class="J_WinpopMain winpop-main"></div>' + '<div class="J_WinpopBtns winpop-btns"></div>' + '</div>',
  5         alert: '<input type="button" class="J_AltBtn pop-btn alert-button" value="确定">',
  6         confirm: '<input type="button" class="J_CfmFalse pop-btn confirm-false" value="取消">' + '<input type="button" class="J_CfmTrue pop-btn confirm-true" value="确定">'
  7     }
  8
  9     function Winpop() {
 10         var config = {};
 11         this.get = function(n) {
 12             return config[n];
 13         }
 14
 15         this.set = function(n, v) {
 16             config[n] = v;
 17         }
 18         this.init();
 19     }
 20
 21     Winpop.prototype = {
 22         init: function() {
 23             this.createDom();
 24             this.bindEvent();
 25         },
 26         createDom: function() {
 27             var body = jQuery("body"),
 28                 ovl = jQuery("#J_WinpopBox");
 29
 30             if (ovl.length === 0) {
 31                 body.append(HTMLS.ovl);
 32             }
 33
 34             this.set("ovl", jQuery("#J_WinpopBox"));
 35             this.set("mask", jQuery("#J_WinpopMask"));
 36         },
 37         bindEvent: function() {
 38             var _this = this,
 39                 ovl = _this.get("ovl"),
 40                 mask = _this.get("mask");
 41             ovl.on("click", ".J_AltBtn", function(e) {
 42                 _this.hide();
 43             });
 44             ovl.on("click", ".J_CfmTrue", function(e) {
 45                 var cb = _this.get("confirmBack");
 46                 _this.hide();
 47                 cb && cb(true);
 48             });
 49             ovl.on("click", ".J_CfmFalse", function(e) {
 50                 var cb = _this.get("confirmBack");
 51                 _this.hide();
 52                 cb && cb(false);
 53             });
 54             mask.on("click", function(e) {
 55                 _this.hide();
 56             });
 57             jQuery(document).on("keyup", function(e) {
 58                 var kc = e.keyCode,
 59                     cb = _this.get("confirmBack");;
 60                 if (kc === 27) {
 61                     _this.hide();
 62                 } else if (kc === 13) {
 63                     _this.hide();
 64                     if (_this.get("type") === "confirm") {
 65                         cb && cb(true);
 66                     }
 67                 }
 68             });
 69         },
 70         alert: function(str, btnstr) {
 71             var str = typeof str === 'string' ? str : str.toString(),
 72                 ovl = this.get("ovl");
 73             this.set("type", "alert");
 74             ovl.find(".J_WinpopMain").html(str);
 75             if (typeof btnstr == "undefined") {
 76                 ovl.find(".J_WinpopBtns").html(HTMLS.alert);
 77             } else {
 78                 ovl.find(".J_WinpopBtns").html(btnstr);
 79             }
 80             this.show();
 81         },
 82         confirm: function(str, callback) {
 83             var str = typeof str === 'string' ? str : str.toString(),
 84                 ovl = this.get("ovl");
 85             this.set("type", "confirm");
 86             ovl.find(".J_WinpopMain").html(str);
 87             ovl.find(".J_WinpopBtns").html(HTMLS.confirm);
 88             this.set("confirmBack", (callback || function() {}));
 89             this.show();
 90         },
 91         show: function() {
 92             this.get("ovl").show();
 93             this.get("mask").show();
 94         },
 95         hide: function() {
 96             var ovl = this.get("ovl");
 97             ovl.find(".J_WinpopMain").html("");
 98             ovl.find(".J_WinpopBtns").html("");
 99             ovl.hide();
100             this.get("mask").hide();
101         },
102         destory: function() {
103             this.get("ovl").remove();
104             this.get("mask").remove();
105             delete window.alert;
106             delete window.confirm;
107         }
108     };
109
110     var obj = new Winpop();
111     window.alert = function(str) {
112         obj.alert.call(obj, str);
113     };
114     window.confirm = function(str, cb) {
115         obj.confirm.call(obj, str, cb);
116     };
117 })(window, jQuery);

然后实例化对象

1 var obj = new Winpop(); // 创建一个Winpop的实例对象
2 // 覆盖alert控件
3 window.alert = function(str) {
4     obj.alert.call(obj, str);
5 };
6 // 覆盖confirm控件
7 window.confirm = function(str, cb) {
8     obj.confirm.call(obj, str, cb);
9 };

以下JS不可少

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="winpop.js"></script>

--摘录自他人文章