嫌棄瀏覽器自帶彈出框，寫個簡單的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":"手機號格式不正確"});

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

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

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