欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用jQuery實現(xiàn)更改默認(rèn)alert框體

 更新時間:2015年04月13日 09:58:30   投稿:hebedich  
本文給大家介紹的是如何使用jquery 改寫Alert彈出框樣式,十分的實用,這里推薦給大家,有需要的小伙伴可以參考下。

更改框體主要用到的是更改系統(tǒng)的內(nèi)置控件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' ? 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(),
         ovl = this.get("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(); // 創(chuàng)建一個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="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="winpop.js"></script>

以上所述就是本文的全部內(nèi)容了,希望對大家能夠有所幫助。

相關(guān)文章

  • jquery獲取img的src值實例介紹

    jquery獲取img的src值實例介紹

    在本篇文章里小編給大家分享了關(guān)于jquery獲取img的src值實例介紹和相關(guān)內(nèi)容,有需要的朋友們學(xué)習(xí)下。
    2019-01-01
  • 用jquery ajax獲取網(wǎng)站Alexa排名的代碼

    用jquery ajax獲取網(wǎng)站Alexa排名的代碼

    其實就是利用了jquery的ajax功能,獲取遠(yuǎn)程的xml文件,讀取指定內(nèi)容的代碼,對于學(xué)習(xí)jquery的朋友是個不錯的參考。
    2009-12-12
  • Jq通過td獲取同行其它列td的方法

    Jq通過td獲取同行其它列td的方法

    下面小編就為大家?guī)硪黄狫q通過td獲取同行其它列td的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10
  • Jquery 獲取相同NAME 或者id刪除行操作

    Jquery 獲取相同NAME 或者id刪除行操作

    這篇文章主要介紹了Jquery 獲取相同NAME 或者id刪除行操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • jQuery的one()方法用法實例

    jQuery的one()方法用法實例

    這篇文章主要介紹了jQuery的one()方法用法,實例分析了one()方法的功能、定義及為匹配元素的特定事件綁定一個一次性的事件處理方法使用技巧,需要的朋友可以參考下
    2015-01-01
  • 詳解easyui 切換主題皮膚

    詳解easyui 切換主題皮膚

    這篇文章主要介紹了easyui 切換主題皮膚方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • jquery form表單序列化為對象的示例代碼

    jquery form表單序列化為對象的示例代碼

    這篇文章主要介紹了jquery form表單序列化為對象具體實現(xiàn),需要的朋友可以參考下
    2014-03-03
  • 基于jquery的獲取瀏覽器窗口大小的代碼

    基于jquery的獲取瀏覽器窗口大小的代碼

    今天正好用到這個,就網(wǎng)上搜了搜,貼出來了。需要的朋友可以參考下。
    2011-03-03
  • 淺談jquery中的each方法$.each、this.each、$.fn.each

    淺談jquery中的each方法$.each、this.each、$.fn.each

    下面小編就為大家?guī)硪黄獪\談jquery中的each方法$.each、this.each、$.fn.each。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • 關(guān)于兩個jQuery(js)特效沖突的bug的解決辦法

    關(guān)于兩個jQuery(js)特效沖突的bug的解決辦法

    下面小編就為大家?guī)硪黄P(guān)于兩個jQuery(js)特效沖突的bug的解決辦法。小編覺得挺不錯的,現(xiàn)在就分享 給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09

最新評論