好贷网好贷款

jQuery 炫登陆

发布时间:2016-12-3 17:43:27 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"jQuery 炫登陆",主要涉及到jQuery 炫登陆方面的内容,对于jQuery 炫登陆感兴趣的同学可以参考一下。

效果:类似对话框 1.aspx <div class="divLoginShadow"></div> <div id="divLogin"> <img src="../Images/images_Gateway/btnClose2.png" class="imgClose" alt="" id="imgClose_Login" title="关闭"/> <div class="divLoginAll"> <div class="divLoginInfo"> <span>用户名</span> <input type="text" class="txtLogin" id="txtLoginName" /> </div> <div class="divLoginInfo"> <span>密码</span> <input type="password" class="txtLogin" id="txtLoginPwd" /> </div> <img src="../Images/images_Gateway/btnSearch.png" class="btnLogin" alt="登录" title="登录" /> </div> <div class="divLoginError"></div> </div> 2.css #btnLogin{ font-family:微软雅黑; font-size:18px; text-align:center;} .divLoginShadow,#divLogin{ width:655px; height:170px; position:absolute; left:26.2%; top: 43%; display:none;} .divLoginShadow{ z-index:2; background:#0099CC;} #divLogin{ z-index:3; background-color:transparent; } .divLoginAll{ width: auto; height:50px; margin:60px 0 0 55px; } .divLoginInfo{ width:225px; height:30px; border-bottom:1px solid #fff; float:left; margin:0 35px 0 0; color:#fff; font-family:微软雅黑; font-size:18px;} .txtLogin{ width:140px; height:20px; line-height:20px; font-size:18px; background-color:transparent; margin:0 0 -5px 0; border:0;} .btnLogin{ width:35px; height:35px; float:left; cursor:pointer;} .divLoginError{ margin:0 0 0 55px; background-color:transparent; height:20px; color:#fff; font-size:12px; width:400px; } 3.jQuery $(function () { initEvents(); }); var loginIndex = 0; //登陆状态,1表示已登录,0表示未登录 var dialogIndex = 1; //窗口状态,1表示当前没有窗口打开,0表示当前有窗口打开 function initEvents() { //设定登录背景透明度 $(".divLoginShadow").css({ 'opacity': '0.85' }); //点击登陆的时候显示登陆对话框 ShowLoginDialog(); //点击登录按钮,用户登录 Login(); //关闭对话框 CloseDialog(); } //点击登陆的时候显示登陆对话框 function ShowLoginDialog() { $("#btnLogin").on("click", function () { if (dialogIndex == 1) { $(".divLoginShadow").css("display", "block"); $("#divLogin").css("display", "block"); $("#txtLoginName")[0].focus(); } dialogIndex = 0; }); } //用户登录 function Login() { $(".btnLogin").click(function () { UserLogin(); }); //点击enter,用户登陆 $("#txtLoginPwd").keydown(function (e) { if (e.which == 13) { UserLogin(); } }); } //用户登录方法实现 function UserLogin() { var loginName = $("#txtLoginName").val(); var loginPwd = $("#txtLoginPwd").val(); if (loginName == "") { $(".divLoginError").html("请输入用户名!"); return; } if (loginPwd == "") { $(".divLoginError").html("请输入密码!"); return; } $.ajax({ type: "Post", //要用post方式 url: "../Ajax/WebServiceHandler.aspx/UserLogin", //预警 contentType: "application/json; charset=utf-8", dataType: "json", data: '{"strLoginName":"' + loginName + '","strLoginPwd":"' + loginPwd + '"}', success: function (res) { if (res.d == "fail") { $(".divLoginError").html("输入的信息有误,请重新输入!"); } else { $("#btnLogin").html("欢迎您:<br/>" + res.d); $(".divLoginShadow").css("display", "none"); $("#divLogin").css("display", "none"); loginIndex = 1; dialogIndex = 1; } }, error: function (err) { } }); } //关闭对话框 function CloseDialog() { $(".imgClose").click(function () { var closeId = $(this).attr("id"); if (closeId == "imgClose_QuickQuery") { $(".divQuickQueryShadow").css("display", "none"); $("#divQuickQuery").css("display", "none"); } else { if (closeId == "imgClose_Login") { $(".divLoginShadow").css("display", "none"); $("#divLogin").css("display", "none"); } } dialogIndex = 1; }); }

上一篇:netstat参数解释
下一篇:CMystring类实现以及返回值的理解

相关文章

关键词: jQuery 炫登陆

相关评论