[Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

引言

查看项目代码的时候，发现项目中用到JqueryUi的弹出框，可拖拽，可设置模式对话框，就想着使用它弄一个登录页面。

弹出框

在Jquery Ui官网可定制下载弹出框，下载和弹出框下载相关的js文件，css文件。

官方网站：http://jqueryui.com/

项目结构：

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.SessionState;
namespace Wolfy.JqueryUILoginDemo
{
/// <summary>
/// CheckCode 的摘要说明
/// </summary>
public class CheckCode : IHttpHandler,IRequiresSessionState
{

public void ProcessRequest(HttpContext context)
{
int codeW = 80;
int codeH = 22;
int fontSize = 16;
string chkCode = string.Empty;
//颜色列表，用于验证码、噪线、噪点
Color[] color = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.Brown, Color.DarkBlue };
//字体列表，用于验证码
string[] font = { "Times New Roman", "Verdana", "Arial", "Gungsuh", "Impact" };
//验证码的字符集，去掉了一些容易混淆的字符
char[] character = { '2', '3', '4', '5', '6', '8', '9', 'a', 'b', 'd', 'e', 'f', 'h', 'k', 'm', 'n', 'r', 'x', 'y', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'W', 'X', 'Y' };
Random rnd = new Random();
//生成验证码字符串
for (int i = 0; i < 4; i++)
{
chkCode += character[rnd.Next(character.Length)];
}
//写入Session
context.Session["Code"] = chkCode;
//创建画布
Bitmap bmp = new Bitmap(codeW, codeH);
Graphics g = Graphics.FromImage(bmp);
g.Clear(Color.White);
//画噪线
for (int i = 0; i < 1; i++)
{
int x1 = rnd.Next(codeW);
int y1 = rnd.Next(codeH);
int x2 = rnd.Next(codeW);
int y2 = rnd.Next(codeH);
Color clr = color[rnd.Next(color.Length)];
g.DrawLine(new Pen(clr), x1, y1, x2, y2);
}
//画验证码字符串
for (int i = 0; i < chkCode.Length; i++)
{
string fnt = font[rnd.Next(font.Length)];
Font ft = new Font(fnt, fontSize);
Color clr = color[rnd.Next(color.Length)];
g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr), (float)i * 18 + 2, (float)0);
}
//画噪点
for (int i = 0; i < 100; i++)
{
int x = rnd.Next(bmp.Width);
int y = rnd.Next(bmp.Height);
Color clr = color[rnd.Next(color.Length)];
bmp.SetPixel(x, y, clr);
}
//清除该页输出缓存，设置该页无缓存
context.Response.Buffer = true;
context.Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds(0);
context.Response.Expires = 0;
context.Response.CacheControl = "no-cache";
context.Response.AppendHeader("Pragma", "No-Cache");
//将验证码图片写入内存流，并将其以 "image/Png" 格式输出
MemoryStream ms = new MemoryStream();
try
{
bmp.Save(ms, ImageFormat.Png);
context.Response.ClearContent();
context.Response.ContentType = "image/Png";
context.Response.BinaryWrite(ms.ToArray());
}
finally
{
//显式释放资源
bmp.Dispose();
g.Dispose();
}
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

CheckCode.ashx
弹出模式登录窗口，可移动的有遮罩效果的登录窗口。

总结

今天之所以总结弹出框插件，只是觉得弹出框，不仅仅就是个弹出框，你可以通过设置得到自己想要的结果，看到项目中用弹出框来弹出信息，看了代码，觉得完全可以做一个可拖拽，遮罩层效果的登录窗。这也就是那么一想，就写了这篇文章。使用插件谁都会，照着demo配置一下就ok了。最近折腾了不少插件，既然花费了时间去学习了，那么就总结一下吧，以备不时之需。

demo下载：链接：http://pan.baidu.com/s/1bnkYM79 密码：xlh7