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

(function(window, jQuery, undefined) {
 
   var HTMLS = {
     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>',
     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_WinpopBox"));
       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' "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' "ovl");
       this.set("type", "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);

然后实例化对象

 var obj = new Winpop(); // 创建一个Winpop的实例对象
 // 覆盖alert控件
 window.alert = function(str) {
   obj.alert.call(obj, str);
 };
 // 覆盖confirm控件
 window.confirm = function(str, cb) {
   obj.confirm.call(obj, str, cb);
 };

以下JS不可少

<script src="/UploadFiles/2021-04-02/jquery-1.11.1.min.js">

以上所述就是本文的全部内容了,希望对大家能够有所帮助。

标签:
jquery,alert,样式

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“使用jQuery实现更改默认alert框体”
暂无“使用jQuery实现更改默认alert框体”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。