一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 04:04:43 编辑:袖梨 来源:一聚教程网

页面加载完成时:
验证码得到焦点时:
实现这个ajax为了节约时间,用户名/密码/验证码我都没判断是否为空,我也没用数据库,登录用户名和密码都是admin
登录成功时:

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

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

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

 代码如下 复制代码



    mydream_后台登录
   
   
   


                   

登录的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;}

.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:155px;border:none;}
.loginpsw label{float:left;display:inline;margin:0 0 0 4px;width:61px;height:auto;line-height:150%;}
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;}

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;
             }
         });
    });
});

login.ashx文件

 代码如下 复制代码

<%@ WebHandler Language="C#" Class="login" %>

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

<%@ WebHandler Language="C#" Class="verifyCode" %>

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 < codeCount; 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 < 50; 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 < chars.Length; 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();
    }
}