您的位置:首页 > Web前端 > JavaScript

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

2010-01-06 14:20 761 查看
开发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"><!--
        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; }
    }
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: