jquery弹出层 jQuery点击弹出用户登录窗口界面 推荐

新建html文档。

准备好需要用到的图标。

书写hmtl代码，<a class="a globalLoginBtn">登录</a><div class="modal fade" id="loginModal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="col-left"> <div class="col-right"> <div class="modal-header"> <button type="button" id="login_close" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="loginModalLabel">登录</h4> <div class="modal-body"> <section class="box-login v5-input-txt" id="box-login"> <ul> <li class="form-group"> <input class="form-control" id="id_account_l" maxlength="50" name="account_l" placeholder="请输入邮箱账号/手机号" type="text"> </li> <li class="form-group"> <input class="form-control" id="id_password_l" name="password_l" placeholder="请输入密码" type="password"> </li> </ul> <p class="good-tips marginB10"><a id="btnForgetpsw" class="fr">忘记密码？</a>还没有账号？<a href="javascript:;" target="_blank" id="btnRegister">立即注册</a></p> <div class="login-box marginB10"> <button id="login_btn" type="button" class="btn btn-micv5 btn-block globalLogin">登录</button> <div id="login-form-tips" class="tips-error bg-danger">错误提示 <div class="threeLogin"><span>其他方式登录</span><a class="nqq" href="javascript:;"></a><a class="nwx" href="javascript:;"></a><,--<a class="nwb"></a>--> </div> </div> </div> </section> </div> </div> </div> </div> </div> </div></div>

书写css代码，.tips-box{width:100%;display:inline-block;position:relative}

.tips{position:absolute;left:0;top:-40px;color:#fff;font-size:12px;line-height:32px;background-color:#ff9600;border-radius:100px;padding:0 15px;box-sizing:border-box}

.tips:after{content:'';position:absolute;bottom:-12px;left:25px;border-top:6px solid #ff9600;border-right:4px solid transparent;border-bottom:6px solid transparent;border-left:4px solid transparent}

.zy_email{text-align:center;color:#5f5f5f}

.zy_email p{padding:0 35px}

.zy_email p,i{padding:40px 0 30px}

.zy_email p,i img{vertical-align:top}

.zy_email p,a{padding:30px 0;text-align:center}

.zy_email p,a > a{display:inline-block;width:148px;height:34px;line-height:34px;text-align:center;color:#fff;background:#5ecfbb;border:1px solid #68c8b6;border-radius:2px}

.zy_email p,a > a:hover{opacity:,7}

.zy_success{margin-bottom:20px}

.zy_success img{vertical-align:middle;margin-right:10px}

.sendE{margin-bottom:20px}

.sendE a{text-decoration:underline;cursor:pointer}

.sendE2{margin-bottom:20px}

.jspContainer{overflow:hidden;position:relative}

.jspVerticalBar{opacity:0;transition:,3s;position:absolute;top:0;right:2px;width:8px;height:100%;z-index:20}

.jspDrag{background:#1abc9c;position:relative;top:0;left:0;cursor:pointer;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}

.jspPane{position:absolute}

书写并添加js代码，<script src="js/jquery2,2,2,min,js"></script></p><p><script src="js/modal,js"></script></p><p><script src="js/script,js"></script>

代码整体结构。

查看效果。