asp.net +jquery 弹出层登录效果

作者：袖梨 2022-06-25

页面加载完成时：

当验证码得到焦点时：

实现这个ajax为了节约时间，用户名/密码/验证码我都没判断是否为空，我也没用数据库，登录用户名和密码都是admin

登录成功时：

这里说明一下，由于时间有限，你可以把这个登录成功或者登录失败，效果做一下，直接在登录窗口上放一个

然后设置其样式，把提示内容追加上去，根据自己个人需求来，下面贴我的全部代码：

下面我们一个个文件来看login.htm文件

代码如下	复制代码
mydream_后台登录管理员登录 selectinput loginpsw">用户名：密码：验证码：

登录的css

代码如下

复制代码

.selectinput{margin-bottom:10px;width:224px;height:20px;background-color:#FFF;border:1px solid;border-color:#999 #CCC #CCC #999;}
.selectinput .txt{float:left;width:165px;border:none;}
.loginpsw label{float:left;display:inline;margin:0 0 0 4px;width:50px;height:auto;line-height:150%; color:#339900}
body,td,input,textarea,select,button{color:#666;font:12px/1.6em Verdana,Helvetica,Arial,sans-serif;}
input,select,button{vertical-align:middle;}
.txt,.txtarea{padding:2px;*padding:0 2px;height:16px;*height:20px;border:1px solid;border-color:#999 #CCC #CCC #999;background:#FFF;}
body{ margin:0 auto;}
.login{border:solid 3px #339900; width:360px; height:223px;display:none; z-index:101;position:absolute; background-color:#FFFFFF;}
.login .title{width:100%;height:30px;line-height:30px; border-bottom:solid 1px #339900;}
.login .title b{ padding-left:5px; color:#000000;}
.login .pad{padding-left:35px;}
.login .divCode{width:80px; height:30px;position:relative;top: -32px;left:170px; display:none;}
.login #btnLogin{width:55px; height:28px;}
#greybackground{background:#000000;width:100%; display:block; z-index:100; top:0px; left:0px; position:absolute;}

jquery文件，其它的到官方下载吧

代码如下

复制代码

///
$(document).ready(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定位弹出层
$("#login").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;
$("#login").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;
$("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });
});
//失去焦点与得到焦点
$("#txtCode").focus(function() {
$(".divCode").fadeIn(1200);
});
$("#txtCode").blur(function() {
$(".divCode").fadeOut();
});
$("#login").fadeIn("slow"); //toggle("slow");
//获取页面文档的高度
var docheight = $(document).height();
//追加一个层，使背景变灰
$("body").append("

");
$("#greybackground").css({ "opacity": "0.1", "height": docheight });
//登录
$("#btnLogin").click(function() {
$.get("../ashx/login.ashx",
{ name: $("#txtName").val(),
pwd: encodeURIComponent($("#txtPassword").val()),
code: $("#txtCode").val()
},
function(data) {
switch (data) {
case "code error":
alert("验证码错误！");
break;
case "success":
alert("登录成功！");
break;
case "false":
alert("登录失败！");
break;
default:
alert("数据加载失败，请稍后再试！");
break;
}
});
});
});

代码如下

复制代码

using System;
using System.Web;
using System.Web.SessionState;

public class login : IHttpHandler, IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
string code = context.Request.QueryString["code"];
context.Response.ContentType = "text/plain";
if (code.ToLower() != context.Session["checkCode"].ToString())
{
context.Response.Write("code error");
}
else
{
string name = context.Request.QueryString["name"];
string pwd = HttpUtility.UrlDecode(context.Request.QueryString["pwd"]);
if (name == "admin" && pwd == "admin")
{
context.Response.Write("success");
}
else
{
context.Response.Write("false");
}
}
}

public bool IsReusable
{
get
{
return false;
}
}

}

verifyCode.ashx

using System;
using System.Web;
using System.Web.SessionState;//第一步导入命名空间
using System.Drawing;

public class verifyCode : IHttpHandler, IRequiresSessionState
{//第二步实现接口就和平常一样可以使用session

public void ProcessRequest(HttpContext context)
{
string checkCode = this.CreateRandomCode(4).ToLower();
context.Session["checkCode"] = checkCode;
this.CreateImage(context, checkCode);
}

public bool IsReusable
{
get
{
return false;
}
}

///

/// 按位生成随机
///

///
///
private string CreateRandomCode(int codeCount)
{
int number;
string checkCode = String.Empty;
Random random = new Random();
for (int i = 0; i {
number = random.Next(100);
switch (number % 3)
{
case 0:
checkCode += ((char)('0' + (char)(number % 10))).ToString();
break;
case 1:
checkCode += ((char)('a' + (char)(number % 26))).ToString();
break;
case 2:
checkCode += ((char)('A' + (char)(number % 26))).ToString();
break;
default:
break;
}
}
return checkCode;
}

///

/// 根据字符生成图片
///

///
///
private void CreateImage(HttpContext context,string checkCode)
{
int randAngle = 45;//随机转动角度
int iwidth = (int)(checkCode.Length * 23);
//封装GDI+ 位图，此位图由图形图像及其属性的像素数据组成，指定的宽度和高度。以像素为单位
System.Drawing.Bitmap image = new System.Drawing.Bitmap(iwidth, 28);

//封装一个　GDI+绘图图面。无法继承此类。从指定的Image创建新的 Graphics
Graphics g = Graphics.FromImage(image);

//清除整个绘图面并以指定背景填充
g.Clear(Color.AliceBlue);

//画一个边框
g.DrawRectangle(new Pen(Color.Black, 0), 0, 0, image.Width - 1, image.Height - 1);

//定义绘制直线和曲线的对象。（只是Pen的颜色，指示此Pen的宽度的值）
Pen blackPen = new Pen(Color.LightGray, 0);

Random rand = new Random();

//划横线的条数可以根据自己的要求

for (int i = 0; i {
//随机高度
//int y = rand.Next(image.Height);
/*绘制一条连线由坐标对指定的两个点的线条
线条颜色、宽度和样式，第一个点的x坐标和y坐标，第二个点的x坐标和y坐标*/
//g.DrawLine(blackPen, 0, y, image.Width, y);
int x = rand.Next(0, image.Width);
int y = rand.Next(0, image.Height);
//画矩形，坐标（x,y）宽高(1,1)
g.DrawRectangle(blackPen, x, y, 1, 1);
}

//拆散字符串成单个字符数组
char[] chars = checkCode.ToCharArray();

//文字居中
StringFormat format = new StringFormat(StringFormatFlags.NoClip);
format.Alignment = StringAlignment.Center;
format.LineAlignment = StringAlignment.Center;

//定义颜色
Color[] c = { Color.Black, Color.DarkGray, Color.DarkOrange, Color.Red, Color.DarkBlue, Color.Green, Color.Orange, Color.Brown, Color.DarkCyan, Color.Purple };
//定义字体
string[] font = { "Verdana", "Microsoft Sans Serif", "Comic Sans MS", "Arial", "宋体", "Arial Baltic" };

for (int i = 0; i {
int cindex = rand.Next(c.Length);
int findex = rand.Next(font.Length);

//font　封装在特定设备上呈现特定字体所需的纹理和资源（字体，大小，字体样式）
Font f = new System.Drawing.Font(font[findex], 16, System.Drawing.FontStyle.Bold);

/*Brush定义用于填充图形图像（如矩形、椭圆、圆形、多边形和封闭路径）的内部对象
SolidBrush(Color.White)初始化指定的颜色　指定画笔颜色为白色*/
Brush b = new System.Drawing.SolidBrush(c[cindex]);

Point dot = new Point(16, 16);

//转动的度数
float angle = rand.Next(-randAngle, randAngle);

//移动光标到指定位置
g.TranslateTransform(dot.X, dot.Y);
g.RotateTransform(angle);
/*在指定的位置并且用指定的Brush和Font对象绘制指定的文本字符串
（指定的字符串，字符串的文本格式，绘制文本颜色和纹理，所绘制文本的左上角的x坐标，坐标）*/
g.DrawString(chars[i].ToString(), f, b, 1, 1, format);
//转回去
g.RotateTransform(-angle);
//移动光标指定位置
g.TranslateTransform(2, -dot.Y);
}
//创建存储区为内存流
System.IO.MemoryStream ms = new System.IO.MemoryStream();

//将此图像以指定的格式保存到指定的流中（将其保存在内存流中，图像的格式）
image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);

//清除缓冲区将流中的内容输出
context.Response.ClearContent();

//获取输出流的类型
context.Response.ContentType = "image/Jpeg";

//将二进制字符串写入HTTP输出流
context.Response.BinaryWrite(ms.ToArray());

g.Dispose();

image.Dispose();
}
}