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

转载：http://www.cnblogs.com/zqzjs/p/4417453.html