php封装弹窗组件,JS实现博客前端页面（四） —— 封装弹窗组件

在JS实现博客前端页面(一) 和JS实现博客前端页面(二)中已经实现了对获取DOM元素和CSS样式相关的方法的封装，本文将在JS实现博客前端页面(三)的基础上实现弹窗组件封装。

界面设计

如下图所示，在点击登录按钮后，会弹出“网站登录”的弹窗：

该弹窗组件由一个遮罩层和窗体组成，遮罩可以阻止我们对周围元素的操作，窗体水平垂直居中，窗体内部是一个登录表单，点击右上角的关闭按钮时整个弹框组件消失。

搭建HTML页面

在之前的html代码中，创建id="mask"的遮罩层和id="loginBox"的窗体

Document

个人中心

• 设置
• 换肤
• 帮助
• 退出

登录

网站登录

账 号：

密 码：

注册新用户 | 忘记密码？

设置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

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

});

};