簡單的ajax遮罩層（加載進度圈）cvi_busy_lib.js

cvi_busy_lib.js

cvi_busy_lib.js 是一個基於ajax的遮罩js，遮罩區域為body區域。使用比較簡單。

效果：

在下面的Js代碼，標注為紅色標記為需要設置的參數。

1、getBusyOverlay(id, overlay, busy) 為遮罩層的方法，

      id：需要寫viewport，詳情請看Js內部。

      overlay：主要是遮罩層的樣式，遮罩層顯示字體的樣式。

      busy：加載進度圈的樣式。    

2、xval.settext("正在登錄，請稍后......");  此處需要寫在beforeSend中，在ajax執行前，設置想要顯示的文字。（參數可不寫）

3、xval.remove();                 當ajax得到返回數據的時候，取消遮罩層，恢復正常頁面模樣。

return {
            remove: function() {
                if (waiting) {
                    waiting = false;
                    ctrl.stop();
                    delete ctrl;
                    parent.removeChild(outer); //去掉遮罩層
                    if (parent.id == 'viewport') {
                        parent.style.display = 'none'; //隱藏div
                    }
                }
            },
            settext: function(v) {
                if (string && typeof (v) == 'string') {
                    string.firstChild.innerHTML = v;//給文字層的div賦值 return false;
                }
            }
        };

Js代碼

<script src="/static/js/cvi_busy_lib.js"></script>

<script type="text/javascript">

//方法默認是，給body添加一個div，然后整個body都是遮罩層。
//getBusyOverlay需要3個參數
//參數一：viewport為創建遮罩層的div，
//參數二：color:'white',               背景色
//       opacity:0.75,                透明度：從 0.0 （完全透明）到 1.0（完全不透明）
//       text:'viewport: loading...', 默認顯示的提示文字，這里是viewport: loading...
//       style:'text-shadow: 0 0 3px black;font-weight:bold;font-size:16px;color:white' 字體樣式
//參數三：color:'#ff0',   進度圈顏色
//       size:100,       進度圈大小
//       type:'o'        有5種類型，c，o，p，t，以及默認類型，具體請看js內部方法getBusyVL。
var xval = getBusyOverlay('viewport', { color: 'white', opacity: 0.75, text: 'viewport: loading...', style: 'text-shadow: 0 0 3px black;font-weight:bold;font-size:16px;color:white' }, { color: '#ff0', size: 100, type: 'o' });
$.ajax({
    url: "/Home/Index",
    type: "POST",
    dataType: "json",
    beforeSend: function() {
        if (xval) {
            xval.settext("正在登錄，請稍后......");//此處可以修改默認文字，此處不寫的話，就按照默認文字來。
        }
    },
    data: { id: id },
    success: function(data) {
        xval.remove(); //此處是移除遮罩層
    }, error: function() {
        xval.remove(); //此處是移除遮罩層
    }
});

局部遮罩Js改進

cvi_busy_lib.js只能給body加遮罩層為全頁面遮罩，如果需要給某個區域增加遮罩層，需更改getBusyOverlay方法。

以下為局部代碼，詳細代碼請在文章末尾下載：

//創建id為viewport的DIV，並為其賦樣式
if (divId != "") {
    //新寫的
    viewport = document.createElement('div'); //不存在則創建
    viewport.id = 'viewport';
    cz = viewport.style; //開始設置div樣式
    cz.backgroundColor = 'transparent'; //屬性設置元素的背景顏色，transparent默認。背景顏色為透明
    cz.position = 'relative'; //一個固定定位（position屬性的值為fixed）元素會相對於視窗來定位，這意味着即便頁面滾動，它還是會停留在相同的位置。
    cz.overflow = 'hidden'; //內容會被修剪，並且其余內容是不可見的。
    cz.display = 'block'; //此元素將顯示為塊級元素，此元素前后會帶有換行符。
    cz.zIndex = 999999;
    cz.left = '0px';
    cz.top = '0px';
    cz.zoom = 1;
    cz.width = '100%';
    cz.height = document.getElementById(divId).offsetHeight == 0 ? '150px' : document.getElementById(divId).offsetHeight - 10 + 'px';
    cz.margin = '0px'; //外邊距
    cz.padding = '0px'; //內邊距
    document.getElementById(divId).appendChild(viewport);
    parent = viewport; //給parent賦予div的意義
} else {
    //原邏輯
    if (id == 'viewport') {
        viewport = document.getElementById('viewport'); //獲取DOM對象
        if (!viewport) {
            viewport = document.createElement('div'); //不存在則創建
            viewport.id = 'viewport';
            cz = viewport.style; //開始設置div樣式
            cz.backgroundColor = 'transparent'; //屬性設置元素的背景顏色，transparent默認。背景顏色為透明
            cz.position = 'fixed'; //一個固定定位（position屬性的值為fixed）元素會相對於視窗來定位，這意味着即便頁面滾動，它還是會停留在相同的位置。
            cz.overflow = 'hidden'; //內容會被修剪，並且其余內容是不可見的。
            cz.display = 'block'; //此元素將顯示為塊級元素，此元素前后會帶有換行符。
            cz.zIndex = 999999;
            cz.left = '0px';
            cz.top = '0px';
            cz.zoom = 1;
            cz.width = '100%';
            cz.height = '100%';
            cz.margin = '0px'; //外邊距
            cz.padding = '0px'; //內邊距
            if (document.all && !window.opera && !window.XMLHttpRequest) {//此處走不通，!window.XMLHttpRequest=false
                cz.position = 'absolute';
                if (typeof document.documentElement != 'undefined') {
                    cz.width = document.documentElement.clientWidth + 'px';
                    cz.height = document.documentElement.clientHeight + 'px';
                }
                else {
                    cz.width = document.getElementsByTagName('body')[0].clientWidth + 'px';
                    cz.height = document.getElementsByTagName('body')[0].clientHeight + 'px';
                }
            }
            document.getElementsByTagName("body")[0].appendChild(viewport); //創建的viewportDIV添加到body中
        } else {
            viewport.style.display = 'block';
            if (document.all && !window.opera && !window.XMLHttpRequest) {
                if (typeof document.documentElement != 'undefined') {
                    viewport.style.width = document.documentElement.clientWidth + 'px';
                    viewport.style.height = document.documentElement.clientHeight + 'px';
                }
                else {
                    viewport.style.width = document.getElementsByTagName('body')[0].clientWidth + 'px';
                    viewport.style.height = document.getElementsByTagName('body')[0].clientHeight + 'px';
                }
            }
        }
        parent = viewport; //給parent賦予div的意義
    }
}

在getBusyOverlay方法中，我添加了一個div的id參數，創建遮罩的時候，以div為父體遮罩這個div。這樣可以實現局部遮罩。

還修改了進度圈的樣式，修改內容可自行比對原Js。

一些注釋可能寫的不對，請諒解。

---

         相關文章：https://www.cnblogs.com/holdon521/p/4661240.html

   原Js下載地址：https://files.cnblogs.com/files/cang12138/cvi_busy_lib.js

改進Js下載地址：https://files.cnblogs.com/files/cang12138/cvi_busy_lib改.js