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

来源：互联网发布：成都知数科技有限公司编辑：程序博客网时间：2024/05/14 11:09

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

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

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

a) CSS样式：Base.css文件

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

b) Javascript脚本：PositionCaculate.js文件

// // Object for parameters. var MemberParameters = { // Id of container div. ContainerDivId: "div_Container", // Id of ShieldBG. ShieldBGId : "div_ShieldBG", // Class Name of ShieldBG. ShieldBGClassName: "ShieldBG", // Number of z-index of ShieldBG. ShieldBGZIndex: 100, // Whether scroll tag. IsScroll: false, // Default space for pop-up layout to left and top. DefaultSpace: 50 }; // // Object for logical modules. var LogicalModules = { // // Show up the content layout. PopUpContainerDiv: function() { // Init. var objContainerDiv = document.getElementById(MemberParameters.ContainerDivId); // Check. if (objContainerDiv == null || objContainerDiv.parentNode == null) return false; // Set the style of container. objContainerDiv.style.position = "absolute"; objContainerDiv.style.zIndex = MemberParameters.ShieldBGZIndex + 1; // Show the content layout. objContainerDiv.style.display = ""; // Show up orCreate a new bg div and set the style. var objShieldBg = document.getElementById(MemberParameters.ShieldBGId); if (objShieldBg != null) { objShieldBg.style.display = ""; } else { var objNewDiv = document.createElement("DIV"); objNewDiv.setAttribute("id", MemberParameters.ShieldBGId); objNewDiv.style.position = "absolute"; objNewDiv.style.zIndex = MemberParameters.ShieldBGZIndex; objNewDiv.style.top = "0px"; objNewDiv.style.left = "0px"; // Set the class name. objNewDiv.className = MemberParameters.ShieldBGClassName; // Append it. objContainerDiv.parentNode.appendChild(objNewDiv); } // // Caculate the width and height. this.CaculateWidthAndHeight(); //// If you want to keep the layout on the changeless position, use this. // Add the reflesh events. // this.AddScrollEvent(); //// }, // // Hide the content layout. HideContainerDiv: function() { var objContainerDiv = document.getElementById(MemberParameters.ContainerDivId); var objShieldBg = document.getElementById(MemberParameters.ShieldBGId); if (objContainerDiv == null || objShieldBg == null) return false; objContainerDiv.style.display = "none"; objShieldBg.style.display = "none"; //// If you want to keep the layout on the changeless position, use this. // Remove the reflesh events. // this.RemoveScrollEvent(); //// }, // // Caculate the widht and height. CaculateWidthAndHeight: function() { // Defind. var clientWidth = document.documentElement.clientWidth; var clientHeight = document.documentElement.clientHeight; // Get the objs. var objContainer = document.getElementById(MemberParameters.ContainerDivId); var objShieldBg = document.getElementById(MemberParameters.ShieldBGId); if (objContainer == null || objShieldBg == null) return false; // Bg width and height. var bgWidth = Math.max(Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), clientWidth); var bgHeight = Math.max(document.body.scrollHeight, clientHeight); // Container width and height. var containerWidth = (clientWidth - objContainer.clientWidth) / 2; var containerHeight = (clientHeight - objContainer.clientHeight) / 2; // Adjust the values. if (containerWidth < 0) containerWidth = MemberParameters.DefaultSpace; if (containerHeight < 0) containerHeight = MemberParameters.DefaultSpace; // Check the container's width and height. if (objContainer.clientHeight > bgHeight) bgHeight = containerHeight + objContainer.clientHeight + MemberParameters.DefaultSpace; if (objContainer.clientWidth > bgWidth) bgWidth = containerWidth + objContainer.clientWidth + MemberParameters.DefaultSpace; // Update the IsScroll status. if (bgHeight > clientHeight || bgWidth > clientWidth) { MemberParameters.IsScroll = true; bgHeight += MemberParameters.DefaultSpace; } // Set values. objContainer.style.left = containerWidth + "px"; objContainer.style.top = containerHeight + "px"; objShieldBg.style.width = bgWidth + "px"; objShieldBg.style.height = bgHeight + "px"; }, // // Set the event to reflesh the pop-up layout. AddScrollEvent: function() { if (MemberParameters.IsScroll) { AssistantFunctions.AddEvent(window, "onscroll", this, this.CaculateWidthAndHeight); AssistantFunctions.AddEvent(window, "onresize", this, this.CaculateWidthAndHeight); } }, // // Remove the events to reflesh the pop-up layout. RemoveScrollEvent: function() { if (MemberParameters.IsScroll) { AssistantFunctions.RemoveEvent(window, "onscroll", this, this.CaculateWidthAndHeight); AssistantFunctions.RemoveEvent(window, "onresize", this, this.CaculateWidthAndHeight); } } }; // // Objects for assistant functions. var AssistantFunctions = { // // Add Event to window. AddEvent: function(obj, event, source, func) { if (obj.attachEvent) { // IE. obj.attachEvent(event, function() { func.apply(source, arguments); }); } else { // FF. obj.addEventListener(event, func, false); } }, // // Remove Event from window. RemoveEvent: function(obj, event, source, func) { if (obj.detachEvent) { // IE. obj.detachEvent(event, func); } else { // FF. obj.removeEventListener(event, func, false); } } }; // // Objects for app invoke. var AppInvokes = { // // Pop up the layout contain some content. PopUpContainerDiv: function() { LogicalModules.PopUpContainerDiv(); }, // // Hide the layout. HideContainerDiv: function() { LogicalModules.HideContainerDiv(); } }; // // Object for tests. var AppTests = { };

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

i. 前台：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebAppForCustomControlTest._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><%@ Register Src="~/WebUserControlFir.ascx" TagName="NewControl" TagPrefix="uu1" %><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Web Custom Control Test</title> <link type="text/css" href="Css/Base.css" mce_href="Css/Base.css" rel="Stylesheet" /> <mce:script src="Javascript/PositionCalculate.js" mce_src="Javascript/PositionCalculate.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="SM" runat="server"></asp:ScriptManager> <div> <label>Client Return Value: </label> <input type="text" id="txtReturnStr" value="No Return, Client!" /> <asp:UpdatePanel ID="upd_Result" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label Text="Server Return Value:" runat="server"></asp:Label> <asp:TextBox ID="txtReturnStrSvr" Text="No Return, Server!" runat="server"></asp:TextBox> </ContentTemplate> </asp:UpdatePanel> <input type="button" value="Click Me to Pop-up New Layout" onclick="AppInvokes.PopUpContainerDiv()" /> </div> <div id="div_Container" style=" display:none;" mce_style=" display:none;" class="Container"> <div class="Content"> <asp:UpdatePanel ID="upd_PopUpControl" runat="server"> <ContentTemplate> <uu1:NewControl ID="wuc_PopUpControl" runat="server" /> </ContentTemplate> </asp:UpdatePanel> </div> </div> </form></body></html>

ii. 后台：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace WebAppForCustomControlTest{ public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // init the web user control. wuc_PopUpControl.PopUpScript = "AppInvokes.PopUpContainerDiv()"; wuc_PopUpControl.HideScript = "AppInvokes.HideContainerDiv()"; wuc_PopUpControl.ReturnContent += new WebUserControlFir.ReturnEventHandler(wuc_PopUpControl_ReturnContent); } private void wuc_PopUpControl_ReturnContent(object source, ReturnClass rc) { if (rc != null && !string.IsNullOrEmpty(rc.Name) && !string.IsNullOrEmpty(rc.Value)) { txtReturnStrSvr.Text = string.Format("{0}:{1}", rc.Name, rc.Value); upd_Result.Update(); } } }}

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

i. 前台：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControlFir.ascx.cs" Inherits="WebAppForCustomControlTest.WebUserControlFir" %><mce:script type="text/javascript"></mce:script><div> <label>This is a test web custom control, so if you see this page, you have pop up this control.</label> <br /> <br /> <asp:TextBox ID="txtInput" runat="server" Text="" Width="150px" TextMode="SingleLine"></asp:TextBox> <br /> <asp:Button ID="btnClose" runat="server" Text="Return String Server" OnClick="OnClick_btnClose" /> <br /> <asp:Button ID="btnChangeContent" runat="server" Text="ChangeListContent" OnClick="OnClick_btnChangeContent" /> <br /> <input type="button" id="btnCloseClient" value="Return String Client" onclick="GetInputValue()" /> <asp:Label ID="labProcResult" Text="" runat="server"></asp:Label> <br /> <asp:ListView ID="livData" runat="server"> <ItemTemplate> <div> <div class="ItemRow"> <asp:Label ID="labName" runat="server" Text='<%#Eval("Name")%>'></asp:Label> </div> <div class="ItemRow"> <asp:Label ID="labAddress" runat="server" Text='<%#Eval("Address") %>'></asp:Label> </div> <div class="ItemRow"> <asp:Label ID="labPhone" runat="server" Text='<%#Eval("Phone") %>'></asp:Label> </div> </div> </ItemTemplate> <LayoutTemplate> <div> <div> <div class="ItemRow">Name</div> <div class="ItemRow">Address</div> <div class="ItemRow">Phone</div> </div> <div> <div id="itemPlaceholder" runat="server"></div> </div> </div> </LayoutTemplate> </asp:ListView></div>

ii. 后台：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace WebAppForCustomControlTest{ public partial class WebUserControlFir : System.Web.UI.UserControl { public delegate void ReturnEventHandler(object source, ReturnClass rc); public event ReturnEventHandler ReturnContent; public string HideScript { set; get; } public string PopUpScript { set; get; } protected void Page_Load(object sender, EventArgs e) { List<PersonClass> Persons = new List<PersonClass>(); for (int i = 0; i < 8; i++) { PersonClass p = new PersonClass() { Name = "User", Address = "Beijing", Phone = "01000000000" }; Persons.Add(p); } livData.DataSource = Persons; livData.DataBind(); } protected void OnClick_btnClose(object sender, EventArgs e) { labProcResult.Text = "Great, you've send the string you input to the main page!"; string InputStr = txtInput.Text; if (!string.IsNullOrEmpty(InputStr)) { ReturnClass rc = new ReturnClass(); rc.Name = txtInput.ID; rc.Value = InputStr; ReturnContent(this, rc); ScriptManager.RegisterStartupScript(labProcResult, labProcResult.GetType(), "ReturnAndClose", HideScript, true); } } protected void OnClick_btnChangeContent(object sender, EventArgs e) { List<PersonClass> Persons = new List<PersonClass>(); for (int i = 0; i < 70; i++) { PersonClass p = new PersonClass() { Name="User", Address="Beijing", Phone="01000000000"}; Persons.Add(p); } livData.DataSource = Persons; livData.DataBind(); ScriptManager.RegisterStartupScript(labProcResult, labProcResult.GetType(), "Reload", PopUpScript, true); } } public class PersonClass { public string Name { set; get; } public string Address { set; get; } public string Phone { set; get; } }}