第一百三十三節，JavaScript，封裝庫--彈出登陸框

JavaScript，封裝庫--彈出登陸框

封裝庫，增長了兩個方法

yuan_su_ju_zhong()方法，將獲取到的區塊元素居中到頁面，
chuang_kou_shi_jian()方法，瀏覽器窗口事件，當窗口的大小變化時觸發函數

/** yuan_su_ju_zhong()方法，將獲取到的區塊元素居中到頁面，
 * 注意：使用此方法時，首先要在css裏將目標區塊設置成(絕對定位,position: absolute;)
 **/
feng_zhuang_ku.prototype.yuan_su_ju_zhong = 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 style = window.getComputedStyle ? window.getComputedStyle(yan_su, null) : null || yan_su.currentStyle;
        var y_style = style.display;
        if (y_style === "none") {
            yan_su.style.display = "block";
        }
        var width = yan_su.offsetWidth;
        var height = yan_su.offsetHeight;
        if (y_style === "none") {
            yan_su.style.display = "none";
        }
        var top = (document.documentElement.clientHeight - height) / 2;
        var left = (document.documentElement.clientWidth - width) / 2;
        for (var ii = 0; ii < this.jie_dian.length; ii++) {
            this.jie_dian[ii].style.top = top + 'px';
            this.jie_dian[ii].style.left = left + 'px';
        }
    } else {
        alert("區塊元素頁面居中,只能設置一個區塊元素，目前jie_dian數組裏是多個元素請檢查！")
    }
    return this;
};

/** chuang_kou_shi_jian()方法，瀏覽器窗口事件，當窗口的大小變化時觸發函數
 * 接收一個參數，就是觸發時要執行的函數（包含函數功能）
 **/
feng_zhuang_ku.prototype.chuang_kou_shi_jian = function (fn) {
    window.onresize = fn;
    return this;
};

 

彈出登陸框

 

 

html代碼

<div id="login">
    <h2><img src="img/close.png" alt="" class="close" />網站登陸</h2>
    <div class="user">賬 號：<input type="text" name="user" class="text" /></div>
    <div class="pass">密 碼：<input type="password" name="pass" class="text" /></div>
    <div class="button"><input type="button" class="submit" value="" /></div>
    <div class="other">註冊新用戶 | 忘記密碼？</div>
</div>

 

css代碼

/*登陸框*/
#login{
    width: 350px;
    height: 250px;
    border: 1px solid #ccc;
    position:absolute;
    display: none;
}
#login h2{
    background: rgba(0, 0, 0, 0) url("img/login_header.png") repeat-x scroll 0 0;
    border-bottom: 1px solid #ccc;
    color: #666;
    font-size: 14px;
    height: 40px;
    line-height : 40px;
    text-align: center;
    letter-spacing: 1px;
    margin: 0 0 20px;
}
#login h2 img{
    cursor: pointer;
    float: right;
    position: relative;
    right: 8px;
    top: 14px;
}
#login div.user, #login div.pass {
    color: #666;
    font-size: 14px;
    padding: 5px 0;
    text-align: center;
}
#login input.text {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    font-size: 14px;
    height: 25px;
    width: 200px;
}
#login .button {
    padding: 20px 0;
    text-align: center;
}
#login input.submit {
    background: rgba(0, 0, 0, 0) url("img/login_button.png") no-repeat scroll 0 0;
    border: medium none;
    cursor: pointer;
    height: 30px;
    width: 107px;
}
#login .other {
    color: #666;
    padding: 15px 10px;
    text-align: right;

 

前臺js代碼

 

//彈出登陸框
    //獲取登陸框，執行將登陸框居中方法，執行瀏覽器窗口事件方法
    $().huo_qu_id('login').yuan_su_ju_zhong().chuang_kou_shi_jian(function () {
        //獲取登陸框，執行將登陸框居中方法
        $().huo_qu_id('login').yuan_su_ju_zhong();
    });
    //獲取登陸元素節點，執行點擊事件方法
    $().huo_qu_class('deng_lu').on_click(function () {
        //獲取登陸框，改變css
        $().huo_qu_id('login').css('display','block');
    });
    //獲取登陸框裏的關閉元素，執行點擊事件方法
    $().huo_qu_class('close').on_click(function () {
        //獲取登陸框，改變css
        $().huo_qu_id('login').css('display','none')
    });