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

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

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

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

<a class="nav-login" href="javascript:;">登录</a>

接着是login表单界面：

<div class="login-form"><div class="login-header"><a href="javascript:;" title="关闭" class="login-close close">×</a><h3 class="loginlabel">用户登录</h3></div><div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1"><form action="main.html" method="get"><div class="input"><label>用户名</label><input type="text" class="uname" id="uname" name="uname" autocomplete="off" spellcheck="false" placeholder="请使用注册邮箱或手机号登录"></div><div class="input"><label>密码</label><input type="password" class="upwd" id="upwd" name="upwd" autocomplete="off" spellcheck="false" placeholder="请输入密码"></div><div class="form-group"><div class="checkbox"><label><input type="checkbox"  name="checkname" id="checkid" onchange="changeval()" value="0">下次自动登录</label><div class="pull-right"><a href="" class="text-right">忘记密码？</a></div></div></div><div class="form-group"><button type="submit" class="btn btn-info btn-lg btn-block">登    录</button></div><div class="form-group"><a href="javascript:;" class="register-btn btn btn-info btn-lg btn-block" role="button">注册新账号</a></div></form></div></div>><div class="login-form-mask"></div>

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

接下来是js部分：

<script>        //设置登录页面弹出效果jQuery(document).ready(function($) {$('.nav-login').click(function() {$('.login-form-mask').fadeIn(100);$('.login-form').slideDown(200);})$('.login-close').click(function() {$('.login-form-mask').fadeOut(100);$('.login-form').slideUp(200);})})</script>

最后是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;}

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