DIV遮罩层--数据缓冲效果的实现

这个非本人所写，拿的网上的自己改了下

JS代码：

View Code

function sAlert(str) {
    var msgw, msgh, bordercolor;
    msgw = 300;//提示窗口的宽度
    msgh = 200;//提示窗口的高度
    titleheight = 25 //提示窗口标题高度
    bordercolor = "#FF3C00";//提示窗口的边框颜色
    titlecolor = "#D2CECE";//提示窗口的标题颜色

    var sWidth, sHeight;
    sHeight = window.innerHeight;
    sWidth = window.innerWidth;
    var bgObj = document.createElement("div");//创建一个div对象
    bgObj.setAttribute('id', 'bgDiv');//可以用bgObj.id="bgDiv"的方法，是为div指定属性值
    bgObj.style.position = "absolute";//把bgDiv这个div绝对定位
    bgObj.style.top = "0";//顶部为0
    bgObj.style.background = "#EFEFF2";//背景颜色
    bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";//ie浏览器透明度设置
    bgObj.style.opacity = "0.6";//透明度(火狐浏览器中)
    bgObj.style.left = "0";//左边为0
    bgObj.style.width = sWidth + "px";//宽(上面得到的屏幕宽度)
    bgObj.style.height = sHeight + "px";//高(上面得到的屏幕高度)
    bgObj.style.zIndex = "100";//层的z轴位置
    document.body.appendChild(bgObj);

    var msgObj = document.createElement("div")//创建一个div对象
    msgObj.setAttribute("id", "msgDiv");//可以用bgObj.id="msgDiv"的方法，是为div指定属性值
    msgObj.setAttribute("align", "center");//为div的align赋值
    //msgObj.style.background ="";//背景颜色为白色
    //msgObj.style.border = "1px solid " + bordercolor;//边框属性，颜色在上面已经赋值
    msgObj.style.position = "absolute";//绝对定位
    msgObj.style.left = "35%";//从左侧开始位置
    msgObj.style.top = "30%";//从上部开始位置
    msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性
    //msgObj.style.marginLeft = "-225px";//左外边距
    //msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";//上外边距
    msgObj.style.width = msgw + "px";//提示框的宽(上面定义过)
    msgObj.style.height = msgh + "px";//提示框的高(上面定义过)
    msgObj.style.textAlign = "center";//文本位置属性，居中。
    msgObj.style.lineHeight = "25px";//行间距
    msgObj.style.zIndex = "101";//层的z轴位置

    // var title = document.createElement("h4");//创建一个h4对象
    // title.setAttribute("id", "msgTitle");//为h4对象填加标题
    // title.setAttribute("align", "right");//文字对齐方式
    // title.style.margin = "0";//浮动
    // title.style.padding = "3px";//浮动
    // title.style.background = titlecolor;//背景颜色
    // title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
    // title.style.opacity = "0.75";//透明
    // //title.style.border="1px solid " + bordercolor;//边框
    // title.style.height = "25px";//高度
    // title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性
    // title.style.color = "white";//文字颜色
    // title.style.cursor = "pointer";//鼠标样式
    //// title.innerHTML = "<a href=\"#\">关闭</a>";//显示的文字
    // title.onclick = function () {
    //     document.body.removeChild(bgObj);//移除遮罩层
    //     document.getElementById("msgDiv").removeChild(title);//在提示框中移除标题
    //     document.body.removeChild(msgObj);//移除提示框
    // }
    document.body.appendChild(msgObj);//在body中画出提示框层
    //document.getElementById("msgDiv").appendChild(title);//在提示框中增加标题
    var txt = document.createElement("p");
    txt.style.margin = "1em 0";//文本浮动
    txt.setAttribute("id", "msgTxt");//为p属性增加id属性
    txt.innerHTML = str;//把传进来的值赋给p属性
    document.getElementById("msgDiv").appendChild(txt);//把p属性增加到提示框里
}

实现1：

效果图：

DIV遮罩层--数据缓冲效果的实现

在UpdateProgress中的实现：

前台代码：

View Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="false">
                <ProgressTemplate>
                    <div id="bgDiv" style="position: absolute; top: 0px; background: #EFEFF2; filter: progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity: 0.6; left: 0px; width: 1280px; height: 1280px; z-index: 100;">
                        <div id="msgDiv" style="text-align: center; vertical-align: central; position: absolute; left: 35%; top: 30%; width: 300px; height: 200px; line-height: 25px; z-index: 101">
                            <p>
                                <img src='Images/loading.gif' title='请稍候....' />
                            </p>
                        </div>
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:GridView ID="GridView1" runat="server"></asp:GridView>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
            <br />
            <asp:Button Text="猛击一下" runat="server" ID="Button1" OnClientClick="return Check();" OnClick="Button1_Click" />
        </div>
    </form>
</body>
</html>

后台代码：

View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AjaxWebApplication1
{
    public partial class UpdateProgress : System.Web.UI.Page
    {
        static List<Student> Items;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Items = new List<Student>();
                for (int i = 0; i < 20; i++)
                {
                    Items.Add(new Student { ID = "100" + i, Name = "Peter" + i });
                }
            }
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(2000);
            GridView1.DataSource = Items;
            GridView1.DataBind();
        }
    }

    public class Student
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
}

秒客网

DIV遮罩层--数据缓冲效果的实现

相关文章