.aspx頁面彈出遮罩層
阿新 • • 發佈:2019-01-03
實現功能:點選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;
}