JQuery遮罩层登录界面效果的实现,AJAX实现登录验证,文章尾有完整示例源码下载,欢迎大家学习研究。
操作系统:Windwos7 Ultimate
开发工具:Visual Studio 2010
数据库:Sql Server 2005
测试浏览器:IE8、FF3.6.8、Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了......)
1、预览
1)登录前
2)点击登录显示登录窗口(层),同时用一个灰色透明层遮罩主窗体内容,点击【登录】,隐藏【登录】,显示loading图,登录失败,显示【登录】,隐藏登录图,同时显示提示信息
3)登录成功后,去掉去掉遮罩层和登录层,显示“xxx,您好! ”
2、实现
使用VS2010创建一个Web Site,此功能是在母版页Site.master中实现的。VS2010会自动添加JQuery的js文件到Scripts文件夹,并创建一个母版页和基于此母版页的Default.aspx和About.aspx两个窗体。
1)登录层界面设计,看Site.master中的代码
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head runat="server"> <title>FlyNoteBook</title> <script src="/UploadFiles/2021-04-02/jquery-1.4.1.min.js">2)实现遮罩层和弹出登录界面的层的js文件Scripts/common.js的代码,注意,里面硬写了一些母版页Site.master中的元素的ID
$(function () { var screenwidth, screenheight, mytop, getPosLeft, getPosTop screenwidth = $(window).width(); screenheight = $(window).height(); //获取滚动条距顶部的偏移 mytop = $(document).scrollTop(); //计算弹出层的left getPosLeft = screenwidth / 2 - 200; //计算弹出层的top getPosTop = screenheight / 2 - 150; //css定位弹出层 $("#divLoginWindow").css({ "left": getPosLeft, "top": getPosTop }); //当浏览器窗口大小改变时 $(window).resize(function () { screenwidth = $(window).width(); screenheight = $(window).height(); mytop = $(document).scrollTop(); getPosLeft = screenwidth / 2 - 200; getPosTop = screenheight / 2 - 150; $("#divLoginWindow").css({ "left": getPosLeft, "top": getPosTop + mytop }); }); //当拉动滚动条时,弹出层跟着移动 $(window).scroll(function () { screenwidth = $(window).width(); screenheight = $(window).height(); mytop = $(document).scrollTop(); getPosLeft = screenwidth / 2 - 200; getPosTop = screenheight / 2 - 150; $("#divLoginWindow").css({ "left": getPosLeft, "top": getPosTop + mytop }); }); //点击链接弹出登录窗口 $("#popup").click(function () { $("#divLoginWindow").fadeIn("slow"); //toggle("slow"); $("#txtUserName").focus(); //获取页面文档的高度 var docheight = $(document).height(); //追加一个层,使背景变灰 $("body").append("<div id='greybackground'></div>"); $("#greybackground").css({ "opacity": "0.5", "height": docheight }); return false; }); //点击关闭按钮 $("#closeBtn").click(function () { $("#divLoginWindow").fadeOut("slow"); ////hide(); //删除变灰的层 $("#greybackground").remove(); return false; }); }); //更换验证码图片 function ChangeCode(obj) { obj.src = "Code.aspx" + Math.random(); }3)点击【登录】实现AJAX登录验证功能的js文件Scripts/login.js的代码
var count = 0; $(document).ready(function () { $("#loading").hide() }); function CheckLogin() { $("#alogin").hide(); $("#loading").show(); var txtCode = $("#txtCode"); var txtName = $("#txtUserName"); var txtPwd = $("#txtPassword"); $.ajax({ url: "CheckLogin.aspx" + txtCode.val() + "&Name=" + txtName.val() + "&Pwd=" + txtPwd.val(), type: "post", datatype: "text", success: function (returnValue) { if (returnValue != "false") { $("#popup").hide(); $("#showMes").hide(); $("#loginSuccess").html(returnValue + ',您好!'); $("#divLoginWindow").remove(); $("#greybackground").remove(); $("#showMes").hide(); } else { count = count + 1; $("#loading").hide(); $("#alogin").show(); $("#showMes").show(); $("#showMes").html("<font color=red>登录失败,请检查后重试!(" + count + "次)</font>"); } } }) }4)请求的CheckLogin.aspx的后台代码,前台清除剩Page命令一行
using System; using System.Data; public partial class CheckLogin : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { try { String strCode = Request.QueryString["Code"]; String strName = Request.QueryString["Name"]; String strPassword = Request.QueryString["Pwd"]; if (strCode != Session["Code"].ToString()) { Response.Write("false"); } else { DAO.SqlHelper helper = new DAO.SqlHelper(); DataTable dt = helper.FillDataTable(String.Format("Select UserName,TrueName From Clients Where UserName='{0}' And Password='{1}'", strName, strPassword )); if (dt != null && dt.Rows.Count > 0) { Session["TrueName"] = dt.Rows[0]["TrueName"].ToString(); Response.Write(dt.Rows[0]["TrueName"].ToString()); } else { Response.Write("false"); } } } catch { Response.Write("false"); } } }源码下载:jQuery+AJAX实现遮罩层登录验证界面
以上就是jQuery实现遮罩层登录界面,AJAX实现登录验证的全部内容,希望对大家的学习有所帮助
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《第9层》游戏特色玩法介绍
- 刀郎.2006-刀郎【九雨天下】【WAV+CUE】
- 59.9高校生.1994-素兰万岁【上华】【WAV+CUE】
- ECHO.1991-你是爱我还是需要我(国专)【EMI百代】【WAV+CUE】
- 交错战线零课主线困难通关阵容推荐一览
- 交错战线挖掘矿场角色推荐攻略
- 命运圣契公测平民阵容怎么搭配 新手开荒平民阵容攻略
- 金梅《现代发烧的声音2》发烧碟[WAV+CUE]
- 雨果唱片-《历史录音珍藏系列-现代芭蕾舞剧·红色娘子军》2CD【WAV】
- [雨果唱片]李冰《地方民歌·戏曲系列-爱的颂歌》WAV
- 《模拟人生》真人电影官宣!玛格特·罗比担任制片人
- 《星战绝地》系列玩家数超4000万!续作表现超预期
- EA称AI是其业务核心!能提高开发效率、节约成本
- 《十年经典成名好歌 高品质最佳音乐 2CD》[WAV/分轨][1GB]
- 《8个男人的故事 2CD》[WAV/分轨][1GB]