嫌棄瀏覽器自帶彈出框，寫個簡單的jq自定義彈窗插件

最近做項目寫個表單驗證，提交信息驗證有錯誤的時候，用了最懶的方法，直接把錯誤提示用alert()彈出框彈出來，於是老大看完后給了這個表情。。。

確實，自帶彈窗樣式丑不能自定義這些問題困擾着很多用戶，而且在同瀏覽器有不同的表現，

有這樣的：。。 有這樣的：。。

還有這樣的：。。 還有這樣的:

相信做前端的都很熟悉這些面孔~ 不統一風格的彈窗直接拉低了整個網站的逼格。。

好，那就寫個簡單的JQ插件來裝飾一下吧。

JQ插件標准的封裝代碼如下，首先需要閉包：

<script type="text/javascript">
(function ($) {
	//這里放入插件代碼
})(jQuery);
</script>

這是jQuery官方的插件開發規范，這樣寫是作用是：
1. 避免全局依賴。
2. 避免第三方破壞。
3. 兼容jQuery操作符’$'和’jQuery’

描述很官方對吧，網上很多資料可以找啦~ 其次是考慮插件開發的策略。

jQuery插件的開發包括兩種：

一種是類級別的插件開發，即給jQuery添加新的全局函數，相當於給jQuery類本身添加方法,也就是$.extend()。jQuery的全局函數就是屬於jQuery命名空間的函數，另一種是對象級別的插件開發，即給jQuery對象添加方法，也就是$.fn.extend();

根據需求，這個插件應該是一個全局的函數，只要把要彈出的內容作為參數，就可以實現功能彈出,~所以選擇前者

$.diy_alert = function(options) {
})(jQuery);

diy_alert是函數名，options是參數。那么接下來我們就要考慮有什么參數要寫進去的了。

根據需求，我只需要一個框框把文字裝起來，好看點就ok，再把這個東西整體居中，文字居中。那么熟悉css的人就知道這里涉及的參數有：

內邊距，字體顏色，背景顏色，字體大小等，又需要再增加。還有最重要的參數：提示文字。

於是里面是這樣寫的：

var dft = {
paddingL: "80px",
paddingR: "80px",
paddingT: "50px",
paddingB: "50px",
fontSize:"32px",
bgColor: "#FFF",
fontColor: "#000",
cont: "成功"
};
var ops = $.extend(dft,options);

（PS：根據@橙子瓣 的評論，這樣寫比較嚴謹：var ops = $.extend(dft,options||{});  ）

dft是默認參數的集合，在$.extend()方法后，把有的參數傳進來，沒有的參數設為默認。

參數有了，接下來只需要生產一個div，把樣式和內容丟進去，然后丟到body里顯示就好了。

至於怎么居中，這里可以用絕對定位的50%定位，再來做邊距的減法修正：

var box = $("<div>").css({ "padding-left": ops.paddingL, "padding-right": ops.paddingR, "padding-top": ops.paddingT, "padding-bottom": ops.paddingB, "border": "1px lightgrey solid","position":"fixed","left":"50%","top":"50%","background-color":"#fff","color":"#000","font-size":ops.fontSize,"z-index":101 }).html(ops.cont).appendTo($("body"));
box.css({"margin-left":-(box.outerWidth(true)/2),"margin-top":-box.outerHeight(true)/2});

可能有些人會對outerWidth(true)有點陌生。這個方法是獲取包括padding,margin,和border在內的真實寬度。

彈窗生成出來了，最后在適當時候去掉就OK，懶人模式：

setTimeout(function(){
box.remove();
},2000);

有時間的同學自己寫個關閉按鈕上去。完整代碼：

(function ($) {
        $.diy_alert = function(options) {
            var dft = {
                paddingL: "80px", 
                paddingR: "80px", 
                paddingT: "50px", 
                paddingB: "50px",
                fontSize:"32px",
                bgColor:    "#FFF",
                fontColor:    "#000",
                cont:    "成功"
            };
            var ops = $.extend(dft,options||{});
            var box = $("<div>").css({ "padding-left": ops.paddingL, "padding-right": ops.paddingR, "padding-top": ops.paddingT, "padding-bottom": ops.paddingB, "border": "1px #000 solid","position":"fixed","left":"50%","top":"50%","background-color":ops.bgColor,"color":ops.fontColor,"font-size":ops.fontSize,"z-index":101 }).html(ops.cont).appendTo($("body"));
            box.css({"margin-left":-(box.outerWidth(true)/2),"margin-top":-box.outerHeight(true)/2});
            setTimeout(function(){
                box.remove();
            },2000); 
        }
    })(jQuery);

記得在這之前引入jquery.js文件。最后就是使用了，超簡單啦，只要給個參數就可以彈出來了：

$.diy_alert({"cont":"手機號格式不正確"});

最后彈出來是這個樣子的：

兩秒后自動消失，好看多了有木有- - 最起碼在任何瀏覽器上都統一樣式了，要漂亮的自己加參數調整~

就這樣吧，寫得不好勿噴，有問題請大俠指出，收工。