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();
     }); 

};