欢迎来到我的地盘：今天是

若得山花插满头，莫问奴归处！

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
ASP.NET Ajax实现弹出提示框，页面变灰不可点击

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

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

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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6.     <title>Untitled Page</title>
  7.     <style type="text/css">
  8.     #UpdatePanel1{
  9.       width: 200px; height: 50px;
  10.       border: solid 1px gray;
  11.     }
  12.     #AlertDiv{
  13.     left: 40%; top: 40%;
  14.     position: absolute; width: 200px;
  15.     padding: 12px;
  16.     border: #000000 1px solid;
  17.     background-color: white;
  18.     text-align: left;
  19.     visibility: hidden;
  20.     z-index: 99;
  21.     }
  22.     
  23.     #AlertButtons{
  24.     position: absolute; right: 5%; bottom: 5%;
  25.     }
  26. </style>
  27. </head>
  28. <body id="bodytag" style="margin: 0px">
  29.     <form id="form1" runat="server">
  30.         <asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError" />
  31.  
  32.         <script type="text/javascript">
  33. var divElem = 'AlertDiv';
  34. var messageElem = 'AlertMessage';
  35. var bodyTag = 'bodytag';
  36. var sWidth,sHeight;
  37.     sWidth=document.body.offsetWidth;//浏览器工作区域内页面宽度
  38.     sHeight=screen.height;//屏幕高度（垂直分辨率）
  39.  
  40.  
  41.     //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色）
  42.     var bgObj=document.createElement("div");//创建一个div对象（背景层）
  43.     //定义div属性，即相当于
  44.     // <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>
  45.     bgObj.setAttribute('id','bgDiv');
  46.     bgObj.style.position= "absolute";
  47.     bgObj.style.display="none";
  48.     bgObj.style.top= "0";
  49.     bgObj.style.background= "#777";
  50.     bgObj.style.filter= "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
  51.     bgObj.style.opacity= "0.6";
  52.     bgObj.style.left= "0";
  53.     bgObj.style.width=sWidth + "px";
  54.     bgObj.style.height=sHeight + "px";
  55.     bgObj.style.zIndex = "10000";
  56.     $get(bodyTag).appendChild(bgObj);
  57.  
  58. Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
  59. function ToggleAlertDiv(visString)
  60. {
  61.      if (visString == 'hidden')
  62.      { 
  63.          $get('bgDiv').style.display="none";
  64.          $get(bodyTag).style.backgroundColor = 'white';
  65.      }
  66.      else
  67.      {
  68.          $get('bgDiv').style.display="";
  69.      }
  70.      var adiv = $get(divElem);
  71.      adiv.style.visibility = visString;
  72. }
  73.  
  74. function ClearErrorState() {
  75.      $get(messageElem).innerHTML = '';
  76.      ToggleAlertDiv('hidden');
  77. }
  78.  
  79. function EndRequestHandler(sender, args)
  80. {
  81.  
  82.    if (args.get_error() != undefined)
  83.    {
  84.        var errorMessage;
  85.  
  86.        if (args.get_response().get_statusCode() == '200')
  87.        {
  88.            errorMessage = args.get_error().message;
  89.        }
  90.        else
  91.        {
  92.            errorMessage = 'An unspecified error occurred. ';
  93.        }
  94.        args.set_errorHandled(true);
  95.  
  96.        ToggleAlertDiv('visible');
  97.  
  98.        $get(messageElem).innerHTML = errorMessage;
  99.    }
  100. }
  101.         </script>
  102.  
  103.         <div>
  104.             <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  105.                 <ContentTemplate>
  106.                     <asp:TextBox ID="TextBox1" runat="server" Width="30px"></asp:TextBox>
  107.                     /<asp:TextBox ID="TextBox2" runat="server" Width="30px"></asp:TextBox>&nbsp;<asp:Button
  108.                         ID="Button1" runat="server" OnClick="Button1_Click" Text="Execute" />
  109.                     <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
  110.                 </ContentTemplate>
  111.             </asp:UpdatePanel>
  112.             <div id="AlertDiv" style="z-index: 20000;">
  113.                 <div id="AlertMessage">
  114.                 </div>
  115.                 <br />
  116.                 <div id="AlertButtons">
  117.                     <input id="OKButton" type="button" value="OK" runat="server" onclick="ClearErrorState()" />
  118.                 </div>
  119.             </div>
  120.         </div>
  121.     </form>
  122. </body>
  123. </html>

Default.aspx.cs 后台页面

  1. using System;
  2. using System.Data;
  3. using System.Configuration;
  4. using System.Web;
  5. using System.Web.Security;
  6. using System.Web.UI;
  7. using System.Web.UI.WebControls;
  8. using System.Web.UI.WebControls.WebParts;
  9. using System.Web.UI.HtmlControls;
  10.  
  11. public partial class _Default : System.Web.UI.Page
  12. {
  13.     protected void Page_Load(object sender, EventArgs e)
  14.     {
  15.  
  16.     }
  17.     protected void Button1_Click(object sender, EventArgs e)
  18.     {
  19.         try
  20.         {
  21.             int a = Int32.Parse(TextBox1.Text);
  22.  
  23.             int b = Int32.Parse(TextBox2.Text);
  24.  
  25.             int res = a / b;
  26.  
  27.             Label1.Text = res.ToString();
  28.         }
  29.  
  30.         catch (Exception ex)
  31.         {
  32.             if (TextBox1.Text.Length > 0 && TextBox2.Text.Length > 0)
  33.             {
  34.                 ex.Data["ExtraInfo"] = " You can't divide " +
  35.  
  36.                     TextBox1.Text + " by " + TextBox2.Text + ".";
  37.  
  38.             }
  39.             throw ex;
  40.         }
  41.     }
  42.     protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
  43.     {
  44.         if (e.Exception.Data["ExtraInfo"] != null)
  45.         {
  46.             ScriptManager1.AsyncPostBackErrorMessage =
  47.  
  48.                 e.Exception.Message +
  49.  
  50.                 e.Exception.Data["ExtraInfo"].ToString();
  51.  
  52.         }
  53.         else
  54.         {
  55.             ScriptManager1.AsyncPostBackErrorMessage =
  56.  
  57.             "An unspecified error occurred.";
  58.         }
  59.     }
  60. }

ok!本章到此结束！

posted on 2008-09-08 15:31  莫问奴归处  阅读(2862)  评论(0)  编辑  收藏  举报
轩轩娃