使用jQuery实现更改默认alert框体

前端之家收集整理的这篇文章主要介绍了使用jQuery实现更改默认alert框体前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

var HTMLS = {
ovl: '<div class="J_WinpopMask winpop-mask" id="J_WinpopMask">
' + '<div class="J_WinpopBox winpop-Box" id="J_WinpopBox">' + '<div class="J_WinpopMain winpop-main">
' + '<div class="J_WinpopBtns winpop-btns">
' + '
',alert: '<input type="button" class="J_AltBtn pop-btn alert-button" value="确定">',confirm: '<input type="button" class="J_CfmFalse pop-btn confirm-false" value="取消">' + '<input type="button" class="J_CfmTrue pop-btn confirm-true" value="确定">'
}

function Winpop() {
var config = {};
this.get = function(n) {
return config[n];
}

 this.set = function(n,v) {
   config[n] = v;
 }
 this.init();

}

Winpop.prototype = {
init: function() {
this.createDom();
this.bindEvent();
},createDom: function() {
var body = jQuery("body"),ovl = jQuery("#J_WinpopBox");

   if (ovl.length === 0) {
     body.append(HTMLS.ovl);
   }

   this.set("ovl",jQuery("#J_Winpop<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"));
   this.set("mask",jQuery("#J_WinpopMask"));
 },bindEvent: function() {
   var _this = this,ovl = _this.get("ovl"),mask = _this.get("mask");
   ovl.on("click",".J_AltBtn",function(e) {
     _this.hide();
   });
   ovl.on("click",".J_CfmTrue",function(e) {
     var cb = _this.get("confirmBack");
     _this.hide();
     cb && cb(true);
   });
   ovl.on("click",".J_CfmFalse",function(e) {
     var cb = _this.get("confirmBack");
     _this.hide();
     cb && cb(false);
   });
   mask.on("click",function(e) {
     _this.hide();
   });
   jQuery(document).on("keyup",function(e) {
     var kc = e.keyCode,cb = _this.get("confirmBack");;
     if (kc === 27) {
       _this.hide();
     } else if (kc === 13) {
       _this.hide();
       if (_this.get("type") === "confirm") {
         cb && cb(true);
       }
     }
   });
 },alert: function(str,btnstr) {
   var str = typeof str === 'string' ? str : str.toString(),ovl = this.get("ovl");
   this.set("type","alert");
   ovl.find(".J_WinpopMain").html(str);
   if (typeof btnstr == "undefined") {
     ovl.find(".J_WinpopBtns").html(HTMLS.alert);
   } else {
     ovl.find(".J_WinpopBtns").html(btnstr);
   }
   this.show();
 },confirm: function(str,callback) {
   var str = typeof str === 'string' ? str : str.toString(),"confirm");
   ovl.find(".J_WinpopMain").html(str);
   ovl.find(".J_WinpopBtns").html(HTMLS.confirm);
   this.set("confirmBack",(callback || function() {}));
   this.show();
 },show: function() {
   this.get("ovl").show();
   this.get("mask").show();
 },hide: function() {
   var ovl = this.get("ovl");
   ovl.find(".J_WinpopMain").html("");
   ovl.find(".J_WinpopBtns").html("");
   ovl.hide();
   this.get("mask").hide();
 },destory: function() {
   this.get("ovl").remove();
   this.get("mask").remove();
   delete window.alert;
   delete window.confirm;
 }

};

var obj = new Winpop();
window.alert = function(str) {
obj.alert.call(obj,str);
};
window.confirm = function(str,cb) {
obj.confirm.call(obj,str,cb);
};
})(window,jQuery);

然后实例化对象

以下JS不可少

猜你在找的jQuery相关文章