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

最新推荐文章于 2024-08-21 15:33:15 发布

杉楂

最新推荐文章于 2024-08-21 15:33:15 发布

阅读量1.8w

点赞数 4

分类专栏：前端开发（h5+css+js）文章标签： css web前端 javascript html

本文链接：https://blog.csdn.net/rhythm923/article/details/53615848

版权

前端开发（h5+css+js）专栏收录该内容

9 篇文章 2 订阅

订阅专栏

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

实现弹出页面的效果还可以使用如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" οnchange="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>

接下来是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;
}

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