使用jQuery實(shí)現(xiàn)更改默認(rèn)alert框體
更新時(shí)間：2015年04月13日 09:58:30 投稿：hebedich
本文給大家介紹的是如何使用jquery 改寫Alert彈出框樣式，十分的實(shí)用，這里推薦給大家，有需要的小伙伴可以參考下。
更改框體主要用到的是更改系統(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);
然后實(shí)例化對象
var obj = new Winpop(); // 創(chuàng)建一個(gè)Winpop的實(shí)例對象
// 覆蓋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插件實(shí)現(xiàn)模擬alert和confirm
- jquery.alert 彈出式復(fù)選框?qū)崿F(xiàn)代碼
- jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
- jQuery提示插件alertify使用指南
- jquery SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框
- jQuery彈出(alert)select選擇的值
- 基于jquery ui的alert,confirm方案（支持換膚）
- jquery模擬alert的彈窗插件
- jquery插件hiAlert實(shí)現(xiàn)網(wǎng)頁對話框美化
- jQuery基于函數(shù)重載實(shí)現(xiàn)自定義Alert函數(shù)樣式的方法
相關(guān)文章
這篇文章主要給大家分享了js實(shí)現(xiàn)碰撞檢測特效代碼，主要就是使用JavaScript實(shí)現(xiàn)網(wǎng)頁版的碰撞檢測，有需要的小伙伴可以參考下2016-10-10
這篇文章主要介紹了jQuery中animate用法,實(shí)例分析了animate的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery的易擴(kuò)展性吸引了來自全球的開發(fā)者來共同編寫jQuery插件。jQuery插件不僅能夠增強(qiáng)網(wǎng)站的可用性，有效地改善用戶體驗(yàn)，還可以大大減少開發(fā)時(shí)間。2011-03-03
Jquery與Bootstrap實(shí)現(xiàn)后臺管理頁面增刪改查功能示例
本篇文章主要介紹了Jquery與Bootstrap實(shí)現(xiàn)后臺管理頁面增刪改查功能示例，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
jQuery+ajax讀取json數(shù)據(jù)并按照價(jià)格排序示例
這篇文章主要介紹了jQuery+ajax讀取json數(shù)據(jù)并按照價(jià)格排序,涉及jQuery基于ajax動態(tài)獲取json文件數(shù)據(jù)并進(jìn)行數(shù)據(jù)遍歷與排序的相關(guān)操作技巧,需要的朋友可以參考下2018-03-03
基于JQuery實(shí)現(xiàn)的Select級聯(lián)
Select級聯(lián)，想必大并不陌生吧，本文為大家介紹下使用jquery是如何快速實(shí)現(xiàn)的，希望對大家有所幫助2014-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery下拉框的簡單應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了jquery高級編程的最佳實(shí)踐詳解,學(xué)習(xí)JQ的朋友一定需要這個(gè)，參考下吧2014-03-03
jQuery側(cè)邊欄隨窗口滾動實(shí)現(xiàn)方法
jQuery側(cè)邊欄隨窗口滾動實(shí)現(xiàn)方法，需要的朋友可以參考一下2013-03-03
利用jQuery插件擴(kuò)展識別瀏覽器內(nèi)核與外殼的類型和版本的實(shí)現(xiàn)代碼
在平時(shí)的B/S開發(fā)中，經(jīng)常需要知道瀏覽器的內(nèi)核類型和版本，甚至，有時(shí)還需要知道瀏覽器的外殼類型和版本2011-10-10