登录框
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>登录input框//centre学习中心专区页面//course课程页面//video视频页面</title> <style> .pop-up-box{ display: none; width: 100%; height: 100%; background: rgba(0,0,0,0.25); position: fixed; top: 0; left: 0; z-index: 999; } .pop-up{ width: 530px; height: 372px; border-radius: 4px; background: #fff; padding: 18px 0 10px; position: absolute; top: 50%; left: 50%; margin-top: -200px; margin-left: -265px; } .pop-up-close{ cursor: pointer; display: block; width: 16px; height: 16px; position: absolute; top: 10px; right: 10px; } .pop-up-title{ text-align: center; line-height: 80px; font-size: 20px; } .pop-up-form{ width: 310px; margin: 0 auto; margin-bottom: 50px; } .pop-up-account,.pop-up-password{ width: 291px; height: 40px; border: 2px solid #e7e7e7; border-radius: 4px; padding: 0; font-size: 16px; color: #585858; padding-left: 15px; } .pop-up-account{ margin-bottom: 32px; } .pop-up-password{ margin-bottom: 8px; } .pop-up-submit{ cursor: pointer; width: 310px; height: 44px; background: #89c997; border-radius: 4px; font-size: 20px; color: #fff; border: none; padding: 0; } .pop-up-footer{ padding-right: 100px; } </style> <script src="jquery-1.11.3.js"></script> </head> <body> <ul> <li><a href="#">学习中心</a></li> </ul> <div><a href="#" class="video">视频课程</a></div> <!--学习中心专区登录弹窗建立和判断状态--> <div class="pop-up-box"> <div class="pop-up"> <span class="pop-up-close">X</span> <p class="pop-up-title">账号密码登录</p> <form class="pop-up-form login-form"> <input class="pop-up-account" type="text" name="username" placeholder="请输入账号"> <input class="pop-up-password" type="password" name="password" placeholder="请输入密码"> <div class="msgg" style="font-size:17px; height:35px; color:red;"><input type="hidden" style="margin-bottom: 32px; vertical-align: -2px"></div> <input class="pop-up-submit" type="button" name="btn-login" value="登录"> </form> <!--<div class="pop-up-footer clearFix"> <a class="pu-new-account" href="/register">新账号注册</a> <a class="pu-new-getback" href="/findpwd">找回密码</a> </div>--> </div> </div> <script> $(function(){ //弹出登录 function popUp () { $("li").click(function(){ $(".pop-up-box").show(); }); $(".pop-up-close").click(function(){ $(".pop-up-box").hide(); }) } popUp (); }) </script> <script> //判断输入用户名和密码不能为空时才可点击登录 //判断用户的用户名密码的存在和正确性 $(".pop-up-submit").click(function(){ $(".pop-up-box").hide(); //账号密码正确的点击登录然后保存状态值，隐藏登录框 $.ajax({ type:"get", url:"", data:{"uname":$(".pop-up-account").val(),"paword":$(".pop-up-password").val()}, dataType:"json", success:function(data){ //判断用户名和密码不能为空时才可点击登录 if(data[0]["uid"]!=0){ sessionStorage.setItem("uid",data[0]["uid"]); /*location.href="main.html";*/ }else{ alert('用户不存在，请重新输入'); $("input:eq(0)").focus();//元素获得焦点; location.href="index.html"; } } }); }); //页面判断用户的登录状态 var uid=sessionStorage.getItem("uid"); //假如uid的值为登录显示的状态码，假如是存在，则用户状态为登录，不存在， // 则用户不可以进入课程观看视频页面，并提示登录 if(uid!=""){ $('.video').click(function(){ location.href=""; }) }else{ $('.video').click(function(){ $(".pop-up-box").show(); }) } </script> <!--<script> $(function(){ login(); keyLogin(); }); function keyLogin(){ $('body').on('keydown', function(){ var theEvent = arguments[0]||window.event; if (theEvent.keyCode==13&&$('.pop-up-box').css('display')!='none'){ //回车键的键值为13 if ($('.zeromodal-overlay').length>0) { $('.zeromodal-overlay').remove(); $('.zeromodal-container').remove(); } else { $('.login-form').find('[name=btn-login]').click(); //调用登录按钮的登录事件 } } }); $('.pop-up-account').on('keydown', function(){ $('.msgg').html(''); }); $('.pop-up-password').on('keydown', function(){ $('.msgg').html(''); }); } function login(){ var $form = $('.login-form'); // $form.find('[name=username]').on('keypress', function() { // $('.msgg').html(''); // }); // $form.find('[name=password]').on('keypress', function() { // $('.msgg').html(''); // }); $form.find('[name=btn-login]').on('click', function(){ if ($form.find('input[name=username]').val()!=''&&$form.find('input[name=password]').val()!='') { $.ajax({ url: host + '/api/pre/login', type: 'post', data: { 'username': $form.find('input[name=username]').val(), 'password': $form.find('input[name=password]').val(), 'rememberMe': 0, 'validateCode':'', 'token': Cookies.get('token'), 'fr': "web" }, success: function(data){ console.log(data); Cookies.set('token', data.data.token); // alert(data.status.msg); if(data.status.code == 1){ setTimeout(function(){ var url = window.location.href; if(url.indexOf('register') >= 0){ window.location.href = '/'; } else if (url.indexOf('findpwd') >= 0) {//如果在找回密码页,登录后跳转到首页 window.location.href = '/'; } else if (url.indexOf('project') >= 0) {//如果在海报页登录,走是否已购买过此项目流程 havebuy(); } else { window.location.reload(); } // }, 2000); }, 0);//BENHAI } else { // alert(data.status.msg); // zeroModal.error(data.status.msg); zeroModal.error({ content: data.status.msg, okFn: function() { } }); } } }); } else { $('.msgg').html('用户名或密码为空！'); } }); } </script>--> </body> </html>
都要引入jq
