今天一個H5頁面要求傳送資料請求時增加一個loading的圖層，於是就自己寫了一個。

實現的原理很簡單，兩個div，z-index設定的大一些，一個div是loading的背景，另外一個自然是旋轉的菊花圖。

html如下：

    <div id="modal-bg" class="modal-bg"></div>
    <div id="modal-img" class="modal-img"><img src="./images/loading.gif" /></div>

css樣式也比較簡單：

    .modal-bg{
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
        opacity: 0.5;
        z-index: 1000;
    }
    .modal-img {
        display: none;
        position: absolute;
        top: 40%;
        left: 40%;
        width: 20%;
        height: 20%;
        z-index: 1001;
        text-align: center;
    }
 

樣式採用絕對定位，都設定為不展示。然後modal-img的z-index屬性要比modal-bg的大，這樣才能顯示在上面。

JavaScript程式碼也挺簡單，我將控制他們顯示/隱藏的方法寫在一個方法裡，方便呼叫，使用之前記得引入zepto（這個H5頁面用於手機端，使用zepto較為輕便）：

    loadingModal:function(){
        $('#modal-bg').toggle();</span>
        $('#modal-img').toggle();</span>
    }

這樣子就寫完了，看看效果：