js+css实现点击导航条“登录”弹出登录框界面

依旧是项目的登录问题，不过这次是界面。

实现弹出页面的效果还可以使用如bootstrap模态框一类的javascript插件，不过这里使用的是js+css简单实现的效果。

首先是导航条的“登录”：

登录

接着是login表单界面：

×
用户登录




用户名



密码




下次自动登录

忘记密码？




登    录


注册新账号




>

login-form-mask为遮罩层，原理就是使用遮罩层的css样式变化来完成弹出效果

接下来是js部分：

最后是css：

.login-form-mask {
z-index: 9998;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.4;
filter: alpha(opacity=40);
display: none
}
.login-form {
z-index: 9999;
position: fixed;
top: 40%;
left: 55%;
width: 500px;
height: 500px;
margin: -180px 0 0 -330px;
border-radius: 5px;
border: solid 2px #666;
background-color: #fff;
display: none;
box-shadow: 0 0 10px #666;
}
.login-close {
margin-right: 15px;
}

当然登录表单具体样式是可以随意调整的。