.aspx页面弹出遮罩层

实现功能：点击Repeater数据表每行的某一个按钮，弹出遮罩层显示“数据获取中，请稍后.....”，后台进行数据获取的操作，获取完成后，弹出相应的消息框。

ShowAbnoramlServer.aspx页面相关代码(点击Repeater表“更新”按钮，调用头部Update函数，传递数据，弹出遮罩层)

头部：

<script src="Scripts/popJs.js" type="text/javascript"></script>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        function Update(aid, aip,date) {
            openNewDiv("newDiv");
            $.ajax(
                {
                    url: "ShowAbnoramlServers.aspx/UpdateServer",
                    type: "POST",
                    dataType: "json",
                    data: "{id:" + aid + ",ip:'" + aip + "',idate:'" + date + "'}",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        alert(data.d);
                        closeNewDiv("newDiv")
                        window.location.href = window.location.href;
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {

                        alert(errorThrown);

                    }
                }
                );
        }
 </script>

Repeater代码：

<table width="100%" cellpadding="0" cellspacing="0">
    <asp:Repeater ID="rptServer" runat="server">
    <HeaderTemplate>
    <tr id="head">
    <td>序号</td>
    <td>IP</td>
    <td>异常描述</td>
    <td>时间</td>
    <td> </td>
    </tr>
    </HeaderTemplate>
    <ItemTemplate>
    <tr  onmouseover="this.style.backgroundColor='#B6D2E0'" onmouseout="this.style.backgroundColor=''">
    <td><%# this.AspPager.PageSize * (this.AspPager.CurrentPageIndex - 1) + Container.ItemIndex + 1%></td>
    <td><%# Eval("AnomalyServerIP") %></td>
    <td><%# Eval("Remark").ToString().Length>50?Eval("Remark").ToString().Substring(0,50):Eval("Remark") %></td>
    <td><%# Eval("IDate","{0:d}") %></td>
    <td>
        <input id="Button1" type="button" value="更 新" onclick="Update(<%# Eval("AnomalyServerID") %>,'<%# Eval("AnomalyServerIP") %>','<%# Eval("IDate") %>')" />
     </td>
    </tr>
    </ItemTemplate>
    </asp:Repeater>
     <tr>
        <td align="center" colspan="5">
            <webdiyer:AspNetPager ID="AspPager" runat="server" 
                onpagechanged="AspPager_PageChanged" 
                CustomInfoHTML="当前:%CurrentPageIndex%/%PageCount% 页    总计:%RecordCount%条" 
                CustomInfoSectionWidth="20%" CustomInfoTextAlign="Left" FirstPageText="【首页】" 
                LastPageText="【末页】" NextPageText="下一页" PrevPageText="上一页" 
                ShowCustomInfoSection="Left" PageSize="25" AlwaysShow="True">
            </webdiyer:AspNetPager> 
            </td>
        </tr>
</table>

头部Update函数中的以下两函数在popJs.js文件中

openNewDiv("newDiv");
closeNewDiv("newDiv");



popJs.js代码：





 var docEle = function () {
        return document.getElementById(arguments[0]) || false;
    }

    function openNewDiv(_id) {
        var m = "mask";
        if (docEle(_id)) document.body.removeChild(docEle(_id));
        if (docEle(m)) document.body.removeChild(docEle(m));

        //mask遮罩层

        var newMask = document.createElement("div");
        newMask.id = m;
        newMask.style.position = "absolute";
        newMask.style.zIndex = "1";
        _scrollWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
        _scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        newMask.style.width = _scrollWidth + "px";
        newMask.style.height = _scrollHeight + "px";
        newMask.style.top = "0px";
        newMask.style.left = "0px";
        newMask.style.background = "#33393C";
        newMask.style.filter = "alpha(opacity=40)";
        newMask.style.opacity = "0.40";
        document.body.appendChild(newMask);

        //新弹出层

        var newDiv = document.createElement("div");
        newDiv.id = _id;
        newDiv.style.position = "absolute";
        newDiv.style.zIndex = "9999";
        newDivWidth = 150;
        newDivHeight = 50;
        newDiv.style.width = newDivWidth + "px";
        newDiv.style.height = newDivHeight + "px";
        newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px";
        newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px";
        newDiv.style.background = "#EFEFEF";
        newDiv.style.border = "1px solid Gray";
        newDiv.style.padding = "5px";
        newDiv.style.color = "Blue";
        newDiv.innerHTML = "数据获取中，请稍后...... ";
        document.body.appendChild(newDiv);

        //弹出层滚动居中

        function newDivCenter() {
            newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px";
            newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px";
        }
        if (document.all) {
            window.attachEvent("onscroll", newDivCenter);
        }
        else {
            window.addEventListener('scroll', newDivCenter, false);
        }

        //关闭新图层和mask遮罩层

//        var newA = document.createElement("a");
//        newA.href = "#";
//        newA.innerHTML = "关闭";
//        newA.onclick = function () {
//            if (document.all) {
//                window.detachEvent("onscroll", newDivCenter);
//            }
//            else {
//                window.removeEventListener('scroll', newDivCenter, false);
//            }
//            document.body.removeChild(docEle(_id));
//            document.body.removeChild(docEle("mask"));
//            return false;
//        }
//        newDiv.appendChild(newA);
    }

    function closeNewDiv(_id) {
        document.body.removeChild(docEle(_id));
        document.body.removeChild(docEle("mask"));
    }


ShowAbnoramlServer.aspx.cs页面调用到的UpdateServer函数
    [WebMethod]
    public static string UpdateServer(string id, string ip, string idate)
    {
        HostDataAccess hostDa = new HostDataAccess();
        hostDa.HostServer = new Host(ip);
        hostDa.HostServer.ID = id;
        string strRes = hostDa.GetNewFlows(idate);        
        return strRes;
    }