通过登陆验证,弹出自定义的层。
Default.aspx前台页面代码:(后台页面类中的代码无需修改)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>jQuery弹出层</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
<script language="javascript" type="text/javascript">
userlogin=function(){
$.ajax({
type:"get",
cache:"false",
url:"ajaxpage.aspx",
dataType:"json",
data:"username="+$("#txt_username").val()+"&password="+$("#txt_pwd").val(),
success:function(data){
if(data.sta==1)
{
dialog(data.info,"test.html","400px","300px","iframe");
}
else
{
// dialog(data.info,"密码错误,您可以<a href='test.html'>点击这里</a>找回密码!","300px","auto","text");
dialog(data.info,"content","300px","auto","id");
}
}
})
}
</script>
<style type="text/css">
.cc{color:#FF0000}
#floatBoxBg{display:none;width:100%;height:auto;background:#000;position:absolute;top:0;left:0;}
.floatBox{border:#666 5px solid;width:300px;position:absolute;top:50px;left:40%;}
.floatBox .title{height:23px;padding:7px 10px 0;background:#333;color:#fff;}
.floatBox .title h4{float:left;padding:0;margin:0;font-size:14px;line-height:16px;}
.floatBox .title span{float:right;cursor:pointer;}
.floatBox .content{ height:auto; padding:20px 15px;background:#fff; color:#000000}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="用户名:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txt_username" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblpwd" runat="server" Text="密码:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txt_pwd" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<input id="Button1" type="button" value="登陆" οnclick="userlogin()" /></td>
</tr>
</table>
</div>
<div id="content" visible="false" style="visibility:hidden">测试如果在调用弹出层方法dialog(),的时候,如果传递的type为id,则将id为content的标签中的内容填充到弹出的层中!</div>
</div>
</form>
</body>
</html>
dialog.js代码:
// Lee dialog 1.0 http://www.xij.cn/blog/?p=68
var dialogFirst=true;
function dialog(title,content,width,height,Type){
if(dialogFirst==true){
var temp_float=new String;
temp_float="<div id=/"floatBoxBg/" style=/"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;/"></div>";
temp_float+="<div id=/"floatBox/" class=/"floatBox/">";
temp_float+="<div class=/"title/"><h4></h4><span>鍏抽棴</span></div>";
temp_float+="<div class=/"content/"></div>";
temp_float+="</div>";
$("body").append(temp_float);
dialogFirst=false;
}
$("#floatBox .title span").click(function(){
$("#floatBoxBg").animate({opacity:"0"},"normal",function(){$(this).hide();});
$("#floatBox").animate({top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px"},"normal",function(){$(this).hide();});
});
$("#floatBox .title h4").html(title);
contentType=content.substring(0,content.indexOf(":"));
content=content.substring(content.indexOf(":")+1,content.length);
switch(Type){
case "url":
var content_array=content.split("?");
$("#floatBox .content").ajaxStart(function(){
$(this).html("loading...");
});
$.ajax({
type:content_array[0],
url:content_array[1],
data:content_array[2],
error:function(){
$("#floatBox .content").html("error...");
},
success:function(html){
$("#floatBox .content").html(html);
}
});
break;
case "text":
$("#floatBox .content").html(content);
break;
case "id":
$("#floatBox .content").html($("#"+content+"").html());
break;
case "iframe":
$("#floatBox .content").html("<iframe src=/""+content+"/" width=/"100%/" height=/""+(parseInt(height)-30)+"px"+"/" scrolling=/"auto/" frameborder=/"0/" marginheight=/"0/" marginwidth=/"0/"></iframe>");
}
$("#floatBoxBg").show();
$("#floatBoxBg").animate({opacity:"0.5"},"normal");
$("#floatBox").attr("class","floatBox "+Type);
$("#floatBox").css({display:"block",left:(($(document).width())/2-(parseInt(width)/2))+"px",top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px",width:width,height:height});
$("#floatBox").animate({top:($(document).scrollTop()+50)+"px"},"normal");
}
ajaxpage.aspx页面类代码:(前台的页面上的HTML代码无需修改)
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class ajaxpage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string username=Request.QueryString["username"];
string pwd=Request.QueryString["password"];
//string username=Request.Params["username"];
//string pwd = Request.Params["password"];
result(username, pwd);
}
}
protected void result(string username, string password)
{
JsonClass jc = null;
if (username == "yht" && password == "yht")
{
jc = new JsonClass("登陆成功!", "", 1);
}
else
{
jc = new JsonClass("登陆失败!", "", 0);
}
Response.Clear();
Response.ContentType = "application/json";
Response.Write(jc);
Response.End();
}
}
JsonClass类代码:(这是建的一个类,具体代码都是什么意思,上面的文章已经说过了)
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
/// <summary>
/// JsonClass 的摘要说明
/// </summary>
public class JsonClass
{
public JsonClass(string info,string data,int sta)
{
//
// TODO: 在此处添加构造函数逻辑
//
this.info = info;
this.data = data;
this.sta = sta;
}
private string info;
public string Info
{
get { return info; }
set { info = value; }
}
private string data;
public string Data
{
get { return data; }
set { data = value; }
}
private int sta;
public int Sta
{
get { return sta; }
set { sta = value; }
}
public override string ToString()
{
return "{/"data/":/"" + data + "/",/"info/":/"" + info + "/",/"sta/":" + sta + "}";
}
}