你的位置:首页 > Java教程

[Java教程]更改默认alert框体


 

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

(function(window, jQuery, undefined) { 2  3   var HTMLS = { 4     ovl: '<div id="J_WinpopMask"></div>' + '<div id="J_WinpopBox">' + '<div ></div>' + '<div ></div>' + '</div>', 5     alert: '<input type="button" value="确定">', 6     confirm: '<input type="button" value="取消">' + '<input type="button" 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>


--摘录自他人文章