JS實現博客前端頁面（四） —— 封裝彈窗組件

時間 2019-12-04

原文原文鏈接

在JS實現博客前端頁面（一）和JS實現博客前端頁面（二）中已經實現了對獲取DOM元素和CSS樣式相關的方法的封裝，本文將在JS實現博客前端頁面（三）的基礎上實現彈窗組件封裝。javascript

界面設計

以下圖所示，在點擊登陸按鈕後，會彈出「網站登陸」的彈窗：
該彈窗組件由一個遮罩層和窗體組成，遮罩能夠阻止咱們對周圍元素的操做，窗體水平垂直居中，窗體內部是一個登陸表單，點擊右上角的關閉按鈕時整個彈框組件消失。css

搭建HTML頁面

在以前的html代碼中，建立id="mask"的遮罩層和id="loginBox"的窗體html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/baseTool.js"></script>
    <script type="text/javascript" src="js/base.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
    <header id="header">
        <div class="logo"><img src="images/logo.gif" alt="" /></div>
        <div class="member">我的中心
            <ul class="member_ul">
                <li><a href="###">設置</a></li>
                <li><a href="###">換膚</a></li>
                <li><a href="###">幫助</a></li>
                <li><a href="###">退出</a></li>
            </ul>    
        </div> 
        <div class="login">登陸</div>
    </header><!-- /header --> 
    <!-- 彈窗組件 -->
    <div id="mask"></div>
    <div id="loginBox">
        <h2><img src="images/close.png" alt="" class="close">網站登陸</h2>
        <div class="user">帳 號：<input type="text"  name="username" class="text" /></div>
        <div class="pass">密 碼：<input type="password" name="password" class="text" /></div>
        <div class="button"><input type="button" class="submit" /></div>
        <div class="other">註冊新用戶 | 忘記密碼？</div>
    </div>
</body>
</html>

設置CSS樣式

在以前的CSS代碼中，加入id="mask"的遮罩層和id="loginBox"的窗體的樣式前端

#mask{//遮罩層
    position: absolute;
    z-index: 999;
    top:0;
    left: 0;
    width: 100%;
    height: 100%; 
    background: #000;
    filter: alpha(Opacity=30);
    opacity: .2;
    display: none; 

}
#loginBox{//窗體
    position: absolute;
    z-index: 1000;
    width: 350px;
    height: 250px;
    border: 1px solid #ccc;
    background-color: #fff;
    display: none; 
}
#loginBox h2{
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    letter-spacing:1px;
    color: #666;
    background: url(../images/login_header.png) repeat-x;
    margin:0;
    padding:0;
    border-bottom: 1px solid #ccc;
    margin:0 0 20px 0;
}
#loginBox h2 img{
    display: block;
    float: right;
    position: relative;
    top:10px;
    right: 10px;
    cursor: pointer;

}
#loginBox .user,#loginBox .pass{
    font-size: 14px;
    color: #666;
    padding: 5px 0;
    text-align: center;
}
#loginBox input.text{
    width:200px;
    height: 25px;
    font-size: 14px;
    border: 1px solid #ccc;
    background-color: #fff;

}
#loginBox .button{
    text-align: center;
    padding: 10px 0;

}
#loginBox input.submit{
    width: 107px;
    height: 30px;
    background: url(../images/login_button.png) no-repeat;
    border: none;
    cursor: pointer;
} 
#loginBox .other{
    text-align: right;
    padding:15px 10px;
    font-size: 14px;
    color: #666;
}

設置效果

設置窗體水平垂直居中

Base.prototype.center = function(width,height){
    //將loginBox 設置爲絕對定位
    //將瀏覽器窗口的高度-窗體自身的高度後除以2後的值設置爲top
    //將瀏覽器窗口的寬度-窗體自身的寬度後除以2後的值設置爲left
    var top=(window.InnerHeight - height)/2 + "px";
    var left=(window.InnerWidth - width)/2 + "px";
    for (var i=0;i<this.elements.length;i++){
        var element = this.elements[i]; 
        element.style.top = top;
        element.style.left = left; 
    }
    return this;        
}

瀏覽器窗口改變大小時觸發居中

//觸發瀏覽器窗口事件
Base.prototype.resize = function(fn){ 
     window.onresize = fn;
     return this;
}

前臺調用

window.onload = function () {
    //登陸彈框
    var mask = $().getId("mask");//獲取遮罩層
    var loginBox=$().getId("loginBox");//獲取窗體
    loginBox.center(350,250);//設置船體居中
    //瀏覽器窗口改變時依然居中
    $().resize(function(){
        loginBox.center(350,250);

    });
    //默認彈窗隱藏，點擊登陸按鈕時顯示彈窗
    $().getClass("login").click(function() {
         /* Act on the event */
         loginBox.show();
         mask.show();
     });
    //點擊關閉按鈕時隱藏彈窗
     $().getClass("close").click(function() {//點擊窗體關閉按鈕，
         /* Act on the event */
         loginBox.hide();
         mask.hide();
     }); 

};