更改框体主要用到的是更改系统的内置控件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>
--摘录自他人文章
