使用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)容了,希望對大家能夠有所幫助。
您可能感興趣的文章:
- JQuery的Alert消息框插件使用介紹
- 自編jQuery插件實現(xiàn)模擬alert和confirm
- jquery.alert 彈出式復(fù)選框?qū)崿F(xiàn)代碼
- jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
- jQuery提示插件alertify使用指南
- jquery SweetAlert插件實現(xiàn)響應(yīng)式提示框
- jQuery彈出(alert)select選擇的值
- 基于jquery ui的alert,confirm方案(支持換膚)
- jquery模擬alert的彈窗插件
- jquery插件hiAlert實現(xiàn)網(wǎng)頁對話框美化
- jQuery基于函數(shù)重載實現(xiàn)自定義Alert函數(shù)樣式的方法
相關(guān)文章
用jquery ajax獲取網(wǎng)站Alexa排名的代碼
其實就是利用了jquery的ajax功能,獲取遠(yuǎn)程的xml文件,讀取指定內(nèi)容的代碼,對于學(xué)習(xí)jquery的朋友是個不錯的參考。2009-12-12淺談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ī)硪黄P(guān)于兩個jQuery(js)特效沖突的bug的解決辦法。小編覺得挺不錯的,現(xiàn)在就分享 給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09