更改框体主要用到的是更改系统的内置控件winpop下面是winpop具体代码
(function(window, jQuery, undefined) { 2 3 var HTMLS = { 4 ovl: ' ' + ' ' + ' ' + ' ' + ' ', 5 alert: '', 6 confirm: '' + '' 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>--摘录自他人文章