ASP.NET&Javascript实现半透明背景&模式弹出个性化页面实例
2010-01-06 14:20
761 查看
开发Web应用时,经常会有弹出模式对话框的情况,可以直接调用window.showModalDialog()方法,一般情况就可以了。
但有一些应用场景,需要我们弹出一些自定义控件或页面,同时用一层半透明的背景将页面的其他地方遮住,以防止用户的其他操作,以达到一种“模式窗口”的效果,这里给出一个实现此类效果,同时支持弹出自定义控件页面中通过委托更新主页面的操作功能,当然,此应用支持IE和FireFox两种浏览器,页面效果如下图:
详细脚本及页面代码代码如下:
a)
CSS
样式:
Base.css
文件
b)
Javascript
脚本:
PositionCaculate.js
文件
c)
主页面:
Default.aspx
文件及后台
i.
前台:
ii.
后台:
d)
自定义控件:
WebUserControlFir.ascx
文件及后台
i.
前台:
ii.
后台:
但有一些应用场景,需要我们弹出一些自定义控件或页面,同时用一层半透明的背景将页面的其他地方遮住,以防止用户的其他操作,以达到一种“模式窗口”的效果,这里给出一个实现此类效果,同时支持弹出自定义控件页面中通过委托更新主页面的操作功能,当然,此应用支持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"><!-- function UpdateReturnStr(sReturn) { var objText = document.getElementById("txtReturnStr"); if (objText != null) { objText.value = sReturn; } } // --></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"><!-- function GetInputValue() { var objInput = document.getElementById("<%=txtInput.ClientID%>"); if (objInput != null) UpdateReturnStr(objInput.value); } // --></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; } } }
相关文章推荐
- ASP.NET&Javascript实现半透明背景&模式弹出个性化页面实例
- JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
- asp.net 中点击button弹出模式对话框,选择值后返回到页面中(window.showModalDialog实现)
- ASP.NET中实现弹出消息框后跳转至另一带参数页面(Javascript)
- JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
- asp.net 中点击按钮弹出模式对话框,选择值后返回到页面中(window.showModalDialog实现)
- Asp.net"页面加载中"效果实现
- 在ASP.NET中使用IFRAME+DIV,可以实现在同一页面使用弹出(模态)窗口
- ASP.net AJAX 调用PageMethods实例(javascript调用服务器页面方法)
- javascript 异步页面查询实现代码(asp.net)
- ASP.NET Ajax实现弹出提示框,页面变灰不可点击
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- javascript 异步页面查询实现代码(asp.net)
- dhl:asp.net mvc下用jQuery ajax方法实现无刷新分页(用户控件)& 整体页面无刷新(2010-11-13 add)
- ASP.net 中的页面继承实现和通用页面的工厂模式的实现
- asp.net 页面弹出层,背景变灰不能操作
- asp.net中倒计时自动跳转页面的实现方法(使用javascript)
- Asp.net"页面加载中"效果实现
- ASP.NET+Ajax+Javascript实现页面定次刷新滚动内容
- Asp.Net中用javascript实现弹出窗口永远居中