H5頁面點選按鈕時的loading圖

今天一個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>
    }
           

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