更改默认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>

--摘录自他人文章