第一百三十四節，JavaScript，封裝庫--遮罩鎖屏

JavaScript，封裝庫--遮罩鎖屏

封裝庫新增1個方法

/** zhe_zhao_suo_ping()方法，將一個區塊元素設置成遮罩鎖屏區塊
 * 注意：通常須要在css文件將元素設置成隱藏
 **/
feng_zhuang_ku.prototype.zhe_zhao_suo_ping = function () {
    if (this.jie_dian.length == 1) {
        var yan_su = null;
        for (var i = 0; i < this.jie_dian.length; i++) {
            yan_su = this.jie_dian[i];
        }
        var chang_w = getInner().width;  //getInner()函數庫函數，跨瀏覽器獲取瀏覽器視窗大小
        var chang_h = getInner().height;
        yan_su.style.width = chang_w + 'px';
        yan_su.style.height = chang_h + 'px';
        yan_su.style.position = 'absolute';
        yan_su.style.top = '0';
        yan_su.style.left = '0';
    } else {
        alert("遮罩鎖屏區塊,只能設置一個區塊元素，目前jie_dian數組裏是多個元素請檢查！")
    }
    return this;
};

 

遮罩鎖屏

 

 

html代碼

 

<div id="suo_ping"></div>

 

 

css代碼

/*遮罩鎖屏區塊*/
#suo_ping{
    z-index: 9998; /*注意：若是遮罩層上面有元素，它的層級要大於9998*/
    background: #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
    display: none;
}

 

 

前臺js代碼

//彈出登陸框加遮罩鎖屏
    //獲取登陸框，執行將登陸框居中方法，執行瀏覽器窗口事件方法
    $().huo_qu_id('login').yuan_su_ju_zhong().chuang_kou_shi_jian(function () {
        //獲取登陸框，執行將登陸框居中方法
        $().huo_qu_id('login').yuan_su_ju_zhong();
        //獲取遮罩鎖屏元素，執行遮罩鎖屏方法
        $().huo_qu_id('suo_ping').zhe_zhao_suo_ping();
    });
    //獲取登陸元素節點，執行點擊事件方法
    $().huo_qu_class('deng_lu').on_click(function () {
        //獲取登陸框，改變css
        $().huo_qu_id('login').xian_shi();
        //獲取遮罩鎖屏元素，執行顯示方法，執行遮罩鎖屏方法
        $().huo_qu_id('suo_ping').xian_shi().zhe_zhao_suo_ping();
    });
    //獲取登陸框裏的關閉元素，執行點擊事件方法
    $().huo_qu_class('close').on_click(function () {
        //獲取登陸框，改變css
        $().huo_qu_id('login').yin_cang();
        //獲取遮罩鎖屏元素，執行隱藏方法
        $().huo_qu_id('suo_ping').yin_cang();
    });