ASP.NET Ajax实现弹出提示框，页面变灰不可点击

发布时间：2008年3月24日 / 分类：ASP.NET / 17,600 次浏览 / 评论

最近在网上看到一篇文章，讲ASP.NET ajax中的异常处理，有一部分是自定义javascript处理异常。突然想到网易邮箱中，弹出对话框，后边的页面变灰且不可点击的效果。
在网上找了一下，实现方法就是用两个层，一个层用来显示提示信息，一个层用来遮住页面；还有一个办法就是用iframe.两者的不同之处大概就在于iframe可以遮住全部的页面元素，而div则不能遮住下拉列表。

我这个例子使用的div,绝大部分引用了：http://www.cnblogs.com/Terrylee/archive/2006/11/13/Customizing_Error_Handling.html

代码如下：
Default.aspx 前台页面及javascript

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
??? <title>Untitled Page</title>
??? <style type="text/css">
??? #UpdatePanel1{
????? width: 200px; height: 50px;
????? border: solid 1px gray;
??? }
??? #AlertDiv{
??? left: 40%; top: 40%;
??? position: absolute; width: 200px;
??? padding: 12px;
??? border: #000000 1px solid;
??? background-color: white;
??? text-align: left;
??? visibility: hidden;
??? z-index: 99;
??? }

??? #AlertButtons{
??? position: absolute; right: 5%; bottom: 5%;
??? }
</style>
</head>
<body id="bodytag" style="margin: 0px">
??? <form id="form1" runat="server">
??????? <asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError" />

??????? <script type="text/javascript">
var divElem = 'AlertDiv';
var messageElem = 'AlertMessage';
var bodyTag = 'bodytag';
var sWidth,sHeight;
??? sWidth=document.body.offsetWidth;//浏览器工作区域内页面宽度
??? sHeight=screen.height;//屏幕高度（垂直分辨率）
??? //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色）
??? var bgObj=document.createElement("div");//创建一个div对象（背景层）
??? //定义div属性，即相当于
??? // <div id="bgDiv" style="position:absolute; top:0; background-color:#777; filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity:0.6; left:0; width:918px; height:768px; z-index:19999;"></div>
??? bgObj.setAttribute('id','bgDiv');
??? bgObj.style.position= "absolute";
??? bgObj.style.display="none";
??? bgObj.style.top= "0";
??? bgObj.style.background= "#777";
??? bgObj.style.filter= "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
??? bgObj.style.opacity= "0.6";
??? bgObj.style.left= "0";
??? bgObj.style.width=sWidth + "px";
??? bgObj.style.height=sHeight + "px";
??? bgObj.style.zIndex = "10000";
??? $get(bodyTag).appendChild(bgObj);

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function ToggleAlertDiv(visString)
{
???? if (visString == 'hidden')
???? {?
???????? $get('bgDiv').style.display="none";
???????? $get(bodyTag).style.backgroundColor = 'white';
???? }
???? else
???? {
???????? $get('bgDiv').style.display="";
???? }
???? var adiv = $get(divElem);
???? adiv.style.visibility = visString;
}

function ClearErrorState() {
???? $get(messageElem).innerHTML = '';
???? ToggleAlertDiv('hidden');
}

function EndRequestHandler(sender, args)
{

?? if (args.get_error() != undefined)
?? {
?????? var errorMessage;

?????? if (args.get_response().get_statusCode() == '200')
?????? {
?????????? errorMessage = args.get_error().message;
?????? }
?????? else
?????? {
?????????? errorMessage = 'An unspecified error occurred. ';
?????? }
?????? args.set_errorHandled(true);

?????? ToggleAlertDiv('visible');

?????? $get(messageElem).innerHTML = errorMessage;
?? }
}
??????? </script>

??????? <div>
??????????? <asp:UpdatePanel ID="UpdatePanel1" runat="server">
??????????????? <ContentTemplate>
??????????????????? <asp:TextBox ID="TextBox1" runat="server" Width="30px"></asp:TextBox>
??????????????????? /<asp:TextBox ID="TextBox2" runat="server" Width="30px"></asp:TextBox>&nbsp;<asp:Button
??????????????????????? ID="Button1" runat="server" OnClick="Button1_Click" Text="Execute" />
??????????????????? <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
??????????????? </ContentTemplate>
??????????? </asp:UpdatePanel>
??????????? <div id="AlertDiv" style="z-index: 20000;">
??????????????? <div id="AlertMessage">
??????????????? </div>
??????????????? <br />
??????????????? <div id="AlertButtons">
??????????????????? <input id="OKButton" type="button" value="OK" runat="server" onclick="ClearErrorState()" />
??????????????? </div>
??????????? </div>
??????? </div>
??? </form>
</body>
</html>

Default.aspx.cs 后台页面

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;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        try
        {
            int a = Int32.Parse(TextBox1.Text);

            int b = Int32.Parse(TextBox2.Text);

            int res = a / b;

            Label1.Text = res.ToString();
        }

        catch (Exception ex)
        {
            if (TextBox1.Text.Length > 0 && TextBox2.Text.Length > 0)
            {
                ex.Data["ExtraInfo"] = " You can't divide " +

                    TextBox1.Text + " by " + TextBox2.Text + ".";

            }
            throw ex;
        }
    }
    protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
    {
        if (e.Exception.Data["ExtraInfo"] != null)
        {
            ScriptManager1.AsyncPostBackErrorMessage =

                e.Exception.Message +

                e.Exception.Data["ExtraInfo"].ToString();

        }
        else
        {
            ScriptManager1.AsyncPostBackErrorMessage =

            "An unspecified error occurred.";
        }
    }
}

ok!本章到此结束！

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马，原文地址《ASP.NET Ajax实现弹出提示框，页面变灰不可点击》

关键字: ajax 自定义错误