當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2025/4/14 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 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";//頂部為0bgObj.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";//左邊為0bgObj.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：

效果圖：

在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; }} }

轉載于:https://www.cnblogs.com/Peter-Youny/archive/2012/10/20/2732547.html

總結

以上是生活随笔為你收集整理的DIV遮罩层--数据缓冲效果的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。