在JS实现博客前端页面（一） 和JS实现博客前端页面（二）中已经实现了对获取DOM元素和CSS样式相关的方法的封装，本文将在JS实现博客前端页面（三）的基础上实现弹窗组件封装。
界面设计
如下图所示，在点击登录按钮后，会弹出“网站登录”的弹窗：
该弹窗组件由一个遮罩层和窗体组成，遮罩可以阻止我们对周围元素的操作，窗体水平垂直居中，窗体内部是一个登录表单，点击右上角的关闭按钮时整个弹框组件消失。
搭建HTML页面
在之前的html代码中，创建id="mask"的遮罩层和id="loginBox"的窗体
<!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();
});
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。