ASP.NET&Javascript实现半透明背景&模式弹出个性化页面实例

开发Web应用时，经常会有弹出模式对话框的情况，可以直接调用window.showModalDialog()方法，一般情况就可以了。

但有一些应用场景，需要我们弹出一些自定义控件或页面，同时用一层半透明的背景将页面的其他地方遮住，以防止用户的其他操作，以达到一种“模式窗口”的效果，这里给出一个实现此类效果，同时支持弹出自定义控件页面中通过委托更新主页面的操作功能，当然，此应用支持IE和FireFox两种浏览器。

详细代码脚本及页面代码如下：

a) CSS样式：Base.css文件

1     div.Container { width:700px; min-height:300px; border:solid 1px #003366; background-image:url(/images/PopupBG.gif); background-repeat:repeat-x; background-color:#d9e1e8; }
2     div.Content { width:640px; min-height:280px; margin-left:30px; margin-top:20px; }
3     div.ShieldBG { background-color:Gray; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}
4     div.ItemRow { display:inline; }

b) Javascript脚本：PositionCaculate.js文件

  1         //
  2         // Object for parameters.
  3         var MemberParameters = {
  4         // Id of container div.
  5         ContainerDivId: "div_Container",
  6         // Id of ShieldBG.
  7         ShieldBGId : "div_ShieldBG",
  8         // Class Name of ShieldBG.
  9         ShieldBGClassName: "ShieldBG",
10         // Number of z-index of ShieldBG.
11         ShieldBGZIndex: 100,
12         // Whether scroll tag.
13         IsScroll: false,
14         // Default space for pop-up layout to left and top.
15         DefaultSpace: 50
16         };
17
18         //
19         // Object for logical modules.
20         var LogicalModules = {
21             //
22             // Show up the content layout.
23             PopUpContainerDiv: function() {
24                 // Init.
25                 var objContainerDiv = document.getElementById(MemberParameters.ContainerDivId);
26                 // Check.
27                 if (objContainerDiv == null || objContainerDiv.parentNode == null)
28                     return false;
29                 // Set the style of container.
30                 objContainerDiv.style.position = "absolute";
31                 objContainerDiv.style.zIndex = MemberParameters.ShieldBGZIndex + 1;
32                 // Show the content layout.
33                 objContainerDiv.style.display = "";
34                 // Show up orCreate a new bg div and set the style.
35                 var objShieldBg = document.getElementById(MemberParameters.ShieldBGId);
36                 if (objShieldBg != null) {
37                     objShieldBg.style.display = "";
38                 } else {
39                     var objNewDiv = document.createElement("DIV");
40                     objNewDiv.setAttribute("id", MemberParameters.ShieldBGId);
41                     objNewDiv.style.position = "absolute";
42                     objNewDiv.style.zIndex = MemberParameters.ShieldBGZIndex;
43                     objNewDiv.style.top = "0px";
44                     objNewDiv.style.left = "0px";
45                     // Set the class name.
46                     objNewDiv.className = MemberParameters.ShieldBGClassName;
47                     // Append it.
48                     objContainerDiv.parentNode.appendChild(objNewDiv);
49                 }
50                 //
51                 // Caculate the width and height.
52                 this.CaculateWidthAndHeight();
53                 //// If you want to keep the layout on the changeless position, use this.
54                 // Add the reflesh events.
55                 //                this.AddScrollEvent();
56                 ////
57             },
58             //
59             // Hide the content layout.
60             HideContainerDiv: function() {
61                 var objContainerDiv = document.getElementById(MemberParameters.ContainerDivId);
62                 var objShieldBg = document.getElementById(MemberParameters.ShieldBGId);
63                 if (objContainerDiv == null || objShieldBg == null)
64                     return false;
65                 objContainerDiv.style.display = "none";
66                 objShieldBg.style.display = "none";
67                 //// If you want to keep the layout on the changeless position, use this.
68                 // Remove the reflesh events.
69                 //                this.RemoveScrollEvent();
70                 ////
71             },
72             //
73             // Caculate the widht and height.
74             CaculateWidthAndHeight: function() {
75                 // Defind.
76                 var clientWidth = document.documentElement.clientWidth;
77                 var clientHeight = document.documentElement.clientHeight;
78                 // Get the objs.
79                 var objContainer = document.getElementById(MemberParameters.ContainerDivId);
80                 var objShieldBg = document.getElementById(MemberParameters.ShieldBGId);
81                 if (objContainer == null || objShieldBg == null)
82                     return false;
83                 // Bg width and height.
84                 var bgWidth = Math.max(Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), clientWidth);
85                 var bgHeight = Math.max(document.body.scrollHeight, clientHeight);
86                 // Container width and height.
87                 var containerWidth = (clientWidth - objContainer.clientWidth) / 2;
88                 var containerHeight = (clientHeight - objContainer.clientHeight) / 2;
89                 // Adjust the values.
90                 if (containerWidth < 0)
91                     containerWidth = MemberParameters.DefaultSpace;
92                 if (containerHeight < 0)
93                     containerHeight = MemberParameters.DefaultSpace;
94                 // Check the container's width and height.
95                 if (objContainer.clientHeight > bgHeight)
96                     bgHeight = containerHeight + objContainer.clientHeight + MemberParameters.DefaultSpace;
97                 if (objContainer.clientWidth > bgWidth)
98                     bgWidth = containerWidth + objContainer.clientWidth + MemberParameters.DefaultSpace;
99                 // Update the IsScroll status.
100                 if (bgHeight > clientHeight || bgWidth > clientWidth) {
101                     MemberParameters.IsScroll = true;
102                     bgHeight += MemberParameters.DefaultSpace;
103                 }
104                 // Set values.
105                 objContainer.style.left = containerWidth + "px";
106                 objContainer.style.top = containerHeight + "px";
107                 objShieldBg.style.width = bgWidth + "px";
108                 objShieldBg.style.height = bgHeight + "px";
109             },
110             //
111             // Set the event to reflesh the pop-up layout.
112             AddScrollEvent: function() {
113                 if (MemberParameters.IsScroll) {
114                     AssistantFunctions.AddEvent(window, "onscroll", this, this.CaculateWidthAndHeight);
115                     AssistantFunctions.AddEvent(window, "onresize", this, this.CaculateWidthAndHeight);
116                 }
117             },
118             //
119             // Remove the events to reflesh the pop-up layout.
120             RemoveScrollEvent: function() {
121                 if (MemberParameters.IsScroll) {
122                     AssistantFunctions.RemoveEvent(window, "onscroll", this, this.CaculateWidthAndHeight);
123                     AssistantFunctions.RemoveEvent(window, "onresize", this, this.CaculateWidthAndHeight);
124                 }
125             }
126         };
127
128         //
129         // Objects for assistant functions.
130         var AssistantFunctions = {
131             //
132             // Add Event to window.
133             AddEvent: function(obj, event, source, func) {
134                 if (obj.attachEvent) {
135                     // IE.
136                     obj.attachEvent(event, function() { func.apply(source, arguments); });
137                 }
138                 else {
139                     // FF.
140                     obj.addEventListener(event, func, false);
141                 }
142             },
143             //
144             // Remove Event from window.
145             RemoveEvent: function(obj, event, source, func) {
146                 if (obj.detachEvent) {
147                     // IE.
148                     obj.detachEvent(event, func);
149                 }
150                 else {
151                     // FF.
152                     obj.removeEventListener(event, func, false);
153                 }
154             }
155         };
156
157         //
158         // Objects for app invoke.
159         var AppInvokes = {
160             //
161             // Pop up the layout contain some content.
162             PopUpContainerDiv: function() {
163                 LogicalModules.PopUpContainerDiv();
164             },
165             //
166             // Hide the layout.
167             HideContainerDiv: function() {
168                 LogicalModules.HideContainerDiv();
169             }
170         };
171
172         //
173         // Object for tests.
174         var AppTests = {
175
176         };

c) 主页面：Default.aspx文件及后台

i. 前台：

1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebAppForCustomControlTest._Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <%@ Register Src="~/WebUserControlFir.ascx" TagName="NewControl" TagPrefix="uu1" %>
6
7 <html xmlns="http://www.w3.org/1999/xhtml" >
8 <head runat="server">
9     <title>Web Custom Control Test</title>
10     <link type="text/css" href="Css/Base.css" rel="Stylesheet" />
11     <script src="Javascript/PositionCalculate.js" type="text/javascript"></script>
12     <script type="text/javascript">
13
14         function UpdateReturnStr(sReturn) {
15             var objText = document.getElementById("txtReturnStr");
16             if (objText != null) {
17                 objText.value = sReturn;
18             }
19         }
20
21     </script>
22 </head>
23 <body>
24     <form id="form1" runat="server">
25         <asp:ScriptManager ID="SM" runat="server"></asp:ScriptManager>
26         <div>
27             <label>Client Return Value: </label>
28             <input type="text" id="txtReturnStr" value="No Return, Client!" />
29             <asp:UpdatePanel ID="upd_Result" runat="server" UpdateMode="Conditional">
30                 <ContentTemplate>
31                     <asp:Label Text="Server Return Value:" runat="server"></asp:Label>
32                     <asp:TextBox ID="txtReturnStrSvr" Text="No Return, Server!" runat="server"></asp:TextBox>
33                 </ContentTemplate>
34             </asp:UpdatePanel>
35             <input type="button" value="Click Me to Pop-up New Layout" onclick="AppInvokes.PopUpContainerDiv()" />
36         </div>
37         <div id="div_Container" style=" display:none;" class="Container">
38             <div class="Content">
39                 <asp:UpdatePanel ID="upd_PopUpControl" runat="server">
40                     <ContentTemplate>
41                         <uu1:NewControl ID="wuc_PopUpControl" runat="server" />
42                     </ContentTemplate>
43                 </asp:UpdatePanel>
44             </div>
45         </div>
46     </form>
47 </body>
48 </html>
49

ii. 后台：

1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.UI;
6 using System.Web.UI.WebControls;
7
8 namespace WebAppForCustomControlTest
9 {
10     public partial class _Default : System.Web.UI.Page
11     {
12         protected void Page_Load(object sender, EventArgs e)
13         {
14             // init the web user control.
15             wuc_PopUpControl.PopUpScript = "AppInvokes.PopUpContainerDiv()";
16             wuc_PopUpControl.HideScript = "AppInvokes.HideContainerDiv()";
17             wuc_PopUpControl.ReturnContent += new WebUserControlFir.ReturnEventHandler(wuc_PopUpControl_ReturnContent);
18         }
19
20         private void wuc_PopUpControl_ReturnContent(object source, ReturnClass rc)
21         {
22             if (rc != null && !string.IsNullOrEmpty(rc.Name) && !string.IsNullOrEmpty(rc.Value))
23             {
24                 txtReturnStrSvr.Text = string.Format("{0}:{1}", rc.Name, rc.Value);
25                 upd_Result.Update();
26             }
27         }
28     }
29 }

d) 自定义控件：WebUserControlFir.ascx文件及后台

i. 前台：

1 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControlFir.ascx.cs" Inherits="WebAppForCustomControlTest.WebUserControlFir" %>
2 <script type="text/javascript">
3     function GetInputValue() {
4         var objInput = document.getElementById("<%=txtInput.ClientID%>");
5         if (objInput != null)
6             UpdateReturnStr(objInput.value);
7     }
8 </script>
9
10 <div>
11     <label>This is a test web custom control, so if you see this page, you have pop up this control.</label>
12     <br />
13     <br />
14     <asp:TextBox ID="txtInput" runat="server" Text="" Width="150px" TextMode="SingleLine"></asp:TextBox>
15     <br />
16     <asp:Button ID="btnClose" runat="server" Text="Return String Server" OnClick="OnClick_btnClose" />
17     <br />
18     <asp:Button ID="btnChangeContent" runat="server" Text="ChangeListContent" OnClick="OnClick_btnChangeContent" />
19     <br />
20     <input type="button" id="btnCloseClient" value="Return String Client" onclick="GetInputValue()" />
21     <asp:Label ID="labProcResult" Text="" runat="server"></asp:Label>
22     <br />
23     <asp:ListView ID="livData" runat="server">
24         <ItemTemplate>
25             <div>
26                 <div class="ItemRow">
27                     <asp:Label ID="labName" runat="server" Text='<%#Eval("Name")%>'></asp:Label>
28                 </div>
29                 <div class="ItemRow">
30                     <asp:Label ID="labAddress" runat="server" Text='<%#Eval("Address") %>'></asp:Label>
31                 </div>
32                 <div class="ItemRow">
33                     <asp:Label ID="labPhone" runat="server" Text='<%#Eval("Phone") %>'></asp:Label>
34                 </div>
35             </div>
36         </ItemTemplate>
37         <LayoutTemplate>
38             <div>
39                 <div>
40                     <div class="ItemRow">Name</div>
41                     <div class="ItemRow">Address</div>
42                     <div class="ItemRow">Phone</div>
43                 </div>
44                 <div>
45                     <div id="itemPlaceholder" runat="server"></div>
46                 </div>
47             </div>
48         </LayoutTemplate>
49     </asp:ListView>
50 </div>

ii. 后台：

1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.UI;
6 using System.Web.UI.WebControls;
7
8 namespace WebAppForCustomControlTest
9 {
10     public partial class WebUserControlFir : System.Web.UI.UserControl
11     {
12         public delegate void ReturnEventHandler(object source, ReturnClass rc);
13         public event ReturnEventHandler ReturnContent;
14
15         public string HideScript { set; get; }
16         public string PopUpScript { set; get; }
17
18         protected void Page_Load(object sender, EventArgs e)
19         {
20             List<PersonClass> Persons = new List<PersonClass>();
21             for (int i = 0; i < 8; i++)
22             {
23                 PersonClass p = new PersonClass() { Name = "User", Address = "Beijing", Phone = "01000000000" };
24                 Persons.Add(p);
25             }
26
27             livData.DataSource = Persons;
28             livData.DataBind();
29         }
30
31         protected void OnClick_btnClose(object sender, EventArgs e)
32         {
33             labProcResult.Text = "Great, you've send the string you input to the main page!";
34             string InputStr = txtInput.Text;
35             if (!string.IsNullOrEmpty(InputStr))
36             {
37                 ReturnClass rc = new ReturnClass();
38                 rc.Name = txtInput.ID;
39                 rc.Value = InputStr;
40                 ReturnContent(this, rc);
41                 ScriptManager.RegisterStartupScript(labProcResult, labProcResult.GetType(), "ReturnAndClose", HideScript, true);
42             }
43         }
44
45         protected void OnClick_btnChangeContent(object sender, EventArgs e)
46         {
47             List<PersonClass> Persons = new List<PersonClass>();
48             for (int i = 0; i < 70; i++)
49             {
50                 PersonClass p = new PersonClass() { Name="User", Address="Beijing", Phone="01000000000"};
51                 Persons.Add(p);
52             }
53
54             livData.DataSource = Persons;
55             livData.DataBind();
56
57             ScriptManager.RegisterStartupScript(labProcResult, labProcResult.GetType(), "Reload", PopUpScript, true);
58         }
59     }
60
61     public class PersonClass
62     {
63         public string Name { set; get; }
64         public string Address { set; get; }
65         public string Phone { set; get; }
66     }
67 }

工程源代码下载链接如下：

/Files/guilin_gavin/WebAppForCustomControlTest.rar

posted on 2010-01-06 14:35 酸甜西瓜阅读(4375) 评论(24) 编辑收藏举报