jquery 弹出自定义层（二）

最新推荐文章于 2025-04-07 13:20:53 发布

xuxubaby

最新推荐文章于 2025-04-07 13:20:53 发布

阅读量1k

点赞数

文章标签： jquery string textbox dialog function float

本文链接：https://blog.csdn.net/y_h_t/article/details/4826222

版权

本文详细介绍了如何使用jQuery结合ASP.NET页面实现用户登陆验证后，自定义层的弹出功能，包括AJAX请求处理、JSON数据交互及弹窗样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过登陆验证，弹出自定义的层。

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 + "}";
    }
}