為NProgress增加模态層，更完美的應用于複雜網頁的細長進度條

NProgress是一款在網頁頂部添加細長進度條的工具，非常輕巧，使用起來也非常便捷，靈感來源于Google, YouTube。我是在用github時發現這一特性的，就想應用到我的網站上，經過層層篩選找到了NProgress，感覺非常棒，另外我又為NProgress添加了模态層，因為我不希望一個請求響應未結束前，目前頁面再去請求服務。

一、元件下載下傳

官網

http://ricostacruz.com/nprogress/

也可以看到示範效果，我就不再貼我網站的效果圖了，就是多了一層模态。

二、應用

1、導入元件

<link type="text/css" rel="stylesheet" href="${ctx}/components/nprogress/nprogress.css" />
<script type="text/javascript" src="${ctx}/components/nprogress/nprogress.js"></script>      

2、使用元件

// 配置
NProgress.configure({
    // 不顯示轉動的小圓圈
    showSpinner : false
});
// 将模态層添加到body中
var ajaxbg = $('<div id="background" class="background"></div>').appendTo("body");
ajaxbg.hide();
// 頁面綁定ajaxStart、ajaxStop方法
$(document).ajaxStart(function() {
    // 啟動
    NProgress.start();
    // 如果存在模态框ajax，則将背景層添加到目前模态框上
    if ($("#pop_ajax_dialog").length > 0) {
        $("#pop_ajax_dialog").append(ajaxbg);
    } else {
        $("body").append(ajaxbg);
    }
    // 模态層
    ajaxbg.show();
}).ajaxStop(function() {
    // 結束、隐藏模态層
    NProgress.done();
    ajaxbg.hide();
});      

我的項目中有模态框，是以彈出模态框的上面應用模态層的話，就将模态層置于彈出模态框的上面，而不再是body上。

ajaxStart、ajaxStop 兩個方法就可以實作請求的進度條的開始和結束。

模态層的樣式

.background { display:block; width:100%; height:100%; opacity:0.4; filter:alpha(opacity=40); background:#FFF; position:absolute; top:0; left:0; z-index:2000;}